flex 布局是什么
是什么
- Flex 是 Flexible Box 的缩写，意为”弹性布局”（= 伸缩布局 = flex布局）。用来为盒状模型提供最大的灵活性。
- 采用flex布局的元素，称为flex容器，其所有的子元素称为容器成员，也称为flex项目（
flex item），子容器可以横向排列也可以竖向排列。
flex布局原理
原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 flexible Box 弹性布局，任何一个容器都可以指定为flex布局。
- 当为父盒子设置为flex布局以后，子元素的float、clear(清除浮动)、vertical-align(flex-align代替)属性失效。
传统布局与flex布局
🍓🍓🍓 传统布局，基于盒模型，依赖 display属性 、position属性 、float属性。它对于那些特殊布局非常不方便，比如垂直居中。
| 传统布局 | flex布局 |
|---|---|
| 兼容性好 | 操作方便，布局极为简单，移动端应用广泛 |
| 布局繁琐 | PC端浏览器支持情况较差 |
| 局限性，不能在移动端很好地布局 | IE 11或更低版本，不支持或仅部分支持 |
- PC端页面布局，用传统布局
- 如果是移动端或者不考虑兼容问题的PC端，还是用flex弹性布局。
- 行内元素也可以用flex布局，用flex布局不分行内和块级元素。
flex布局父项常见属性
| 属性 | 描述 | 属性 |
|---|---|---|
| flex-direction | 设置主轴方向（为x或者为y），默认主轴为x，侧轴为y。 | row row-reverse column column-reverse |
| flex-wrap | 设置子元素是否换行，默认情况：所有flex项目都排列在一行，如果装不开，会缩小子元素的宽度。 | no-wrap：默认不换行 wrap：换行 |
| justify-content | 设置主轴上子元素排列方式。注意：使用前一定要确定好主轴是哪个。 | flex-start：默认值，主轴为x轴时，子容器从左到右排列；flex-end ：从尾部开始排列（不反转）；center：在主轴居中对齐；space-around：平分剩余空间；space-between：先两边贴边，再平分剩余空间（重要） |
| align-items | 设置侧轴上子元素的排列方式，在子项为单项的时候使用 | flex-start flex-end center stretch:子盒子不要给宽度，可以拉伸成和父亲一样高 |
| align-content | 设置侧轴上子元素的排列方式，只能用于子项出现换行的情况(多行)； 在单行下没有效果。 | flex-start：默认值在侧轴头部开始排列；flex-end ：从尾部开始排列（不反转）；center：在侧轴中间显示；space-around：平分剩余空间；space-between：先两边贴边，再平分剩余空间；stretch：拉伸，设置子项元素高度平分父元素高度 |
| flex-flow | 是flex-direction和flex-wrap属性的复合属性，设置主轴方向和是否换行/列结合起来，简写 | flex-flow:row wrap |
flex布局子项常见属性
| 属性 | 描述 | 属性 |
|---|---|---|
| flex | 定义子项分配剩余空间，用flex来表示占多少份数，应用：左侧固定，右侧固定，中间自适应 | 默认为零。自适应子项不要定义宽/高 |
| align-self | 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，设置子项自己在侧轴上不同对齐方式，默认为auto，表示继承父元素的align-items属性 | flex-start flex-end center stretch |
| order | 定义子项目的排列顺序，order数组越小，排列越靠前 | order:-1; |
