目录
一、简介
手机端和网页端应用最多的布局方式，不支持IE版本小于10的浏览器
二、基本概念
- 主轴：main axis ,部件排列方向
- 交叉轴：cross axis，部件副轴
- 开启方式：flex container 的div只要开启
display : flex，即可
| container属性名 | 属性意义 | item属性名 | 属性意义 |
|---|---|---|---|
| flex-flow | flex-direction和flex-wrap合写 | flex | 下面三个复合写法 |
| flex-direction | 设定flex-items排布的主轴 | flex-grow | item沿主轴宽度 |
| flex-wrap | 设定flex-items是否自动换行 | flex-basis | 略 |
| justify-content | flex-items在主轴上的分布 | flex-shrink | 略 |
| align-items | flex-items在交叉轴上的对齐方式 | order | item设定序号 |
| align-content | flex-items在交叉轴上的分布 | align-self | item对齐属性 |
三、flex-container属性
- 位置：放在父盒子里的CSS里
- 功能：调整子盒子位置
3.1 主轴方向：flex-direction
默认为第一种display: row
3.2 自动换行：flex-wrap
- 不换号（默认）：nowrap，当大于父盒子宽度，压缩所有子盒子，使每个子盒子宽度相等
- 换行：wrap，当大于父盒子宽度，自动换行，可结合
align-content一起使用 - 换行并翻转（较少）：wrap-reverse，沿着父盒子的水平方向中线翻转子盒子
3.3 主轴上的内容分布：justify-content
灰色为背景，粉、绿、紫为flex-item元素，默认为第一种
补充：flex-evenly：flex-items之间的距离相等，且等于flex-items到父盒子边界的距离
3.4 交叉轴对齐基准线：align-items
默认为第一种：flex-start
3.5 交叉轴上的内容分布：align-content
参考3.3
四、flex-items属性
4.1 综合属性：flex
- 若只有一个属性，则为
flex-grow
4.2 item沿主轴宽度：flex-grow
- 若为小数，则主轴方向宽度为100%，各子盒子按百分数分布
- 若为整数，则按权重分配各子盒子
4.1 序号属性：order
- 在flex-items的CSS属性中加
order : 数字，可以让子盒子按顺序从小到大排列
4.1 对齐属性：align-self
- 在flex-items的CSS属性中加
align-self : center，可以使单个item对齐方式覆盖父盒子的