共计 899 个字符，预计需要花费 3 分钟才能阅读完成。
为什么要应用 Flex 布局？
- Flex 布局是目前比拟风行的一种布局，因为它非常简略灵便，区区简略几行代码就能够实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。应用 Flex 属性就能够写出简洁优雅简单的页面布局
目前整顿了一些 Flex 布局罕用的一些属性，以下简略说一下容器和我的项目的意思
- 容器 ：采纳 Flex 布局的元素，称为容器
- 我的项目 ：指的是容器外面的子元素
容器的 6 个属性
- flex-direction：属性决定主轴的方向（即我的项目的排列方向）
- flex-wrap：默认状况下我的项目都排在一条轴线上，如果一行放不下如何解决（换行形式）
- flex-flow：flex-direction | flex-wrap（2 个属性的简写）
- justify-content：我的项目在主轴上的对齐形式（默认程度对齐形式）
- align-items：我的项目在穿插轴上如何对齐（默认垂直对齐形式）
- align-content：多根轴线的对齐形式（即多行的对齐形式）
我的项目的 6 个属性
- order：我的项目的排列程序。数值越小，排列越靠前，默认为 0
- flex-grow：我的项目的放大（默认指宽度）比例，默认为 0，即如果存在残余空间，也不放大
- flex-shrink：我的项目的放大（默认指宽度）比例，默认为 1，即如果空间有余，该我的项目将放大
- flex-basis：我的项目将占据固定空间（默认设置固定宽度）
- flex：flex-grow | flex-shrink | flex-basis（3 个属性的缩写）
- align-self：容许单个我的项目有与其余我的项目不一样的对齐形式，可覆 align-items 属性
参考资料：
Flex 布局教程：语法篇 – 阮一峰的网络日志
文章的内容 / 灵感都从下方内容中借鉴
- 【继续保护 / 更新 500+ 前端面试题 / 笔记】https://github.com/noxussj/In…
- 【大数据可视化图表插件】https://www.npmjs.com/package…
- 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/
正文完
