# flex 布局概述 ## 1. flex 是什么 - flex 是 Flexible Box 的缩写,意为**弹性布局** - flex 2009 年就已出现,浏览器兼容性很好,请放心使用 --- ## 2. flex 解决了什么问题 - 块元素的垂直居中, flex 可以轻松解决 - 元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局 --- ## 3. flex 项目的布局方向是什么 - 一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想 - flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直 - flex 项目排列的方向, 称为**主轴**, 水平和垂直二种 - 与主轴垂直的称为**交叉轴**(有的教程也称之为*副轴/侧轴*) --- ## 4. flex 布局中常用术语有哪些 | 序号 | 简记 | 术语 | | ---- | ------ | --------------------------------------- | | 1 | 二成员 | 容器和项目(`container / item`) | | 2 | 二根轴 | 主轴与交叉轴(`main-axis / cross-axis`) | | 3 | 二根线 | 起始线与结束线(`flex-start / flex-end`) |  --- ## 5.flex 容器属性有哪些 | 序号 | 属性 | 描述 | | ---- | ----------------- | ------------------------------------------------------------- | | 1 | `flex-direction` | 设置容器中的主轴方向: 行/水平方向, 列/垂直方向 | | 2 | `flex-wrap` | 是否允许创建多行容器,即 flex 项目一行排列不下时, 是否允许换行 | | 3 | `flex-flow` | 简化 `flex-direction, flex-wrap` 属性 | | 4 | `justify-content` | 设置 flex 项目在主轴上对齐方式 | | 5 | `align-items` | 设置 flex 项目在交叉轴上对齐方式 | | 6 | `align-content` | 多行容器中,项目在交叉轴上的对齐方式 | --- ## 6. flex 项目属性有哪些 | 序号 | 属性 | 描述 | | ---- | ------------- | ------------------------------------------------------------------ | | 1 | `flex-basis` | 项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度 | | 2 | `flex-grow` | 项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目 | | 3 | `flex-shrink` | 项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减 | | 4 | `flex` | 是上面三个属性的简化缩写: `flex: flex-grow flex-shrink flex-basis` | | 5 | `align-self` | 单独自定义某个项目在交叉轴上的对齐方式 | | 6 | `order` | 自定义项目在主轴上的排列顺序,默认为 0,书写顺序,值越小位置越靠前 |