Flexible Box Layout Mode

Flexible Box Layout Mode.png

main size：主轴
cross size：交叉轴

Flex属性（约定了一套设置项目的大小、排列、排序的规则）

display: flex;

flex-direction（规定灵活项目的方向）

flex-direction:row / row-reverse / column / column-reverse / initial / inherit;
/*参数说明：
- row：水平正向排列（默认）
- row-reverse：水平反向排列
- column：垂直正向排列
- column-reverse：垂直反向排列
- initial：设置该属性为它的默认值
- inherit：从父元素继承该属性
*/

flex-wrap（规定灵活项目是否拆行或拆列）

flex-wrap:nowrap / wrap / wrap-reverse / initial / inherit;
/*参数说明：
- nowrap：不换行（默认）
- wrap：换行
- wrap-reverse：换行（上下行颠倒）
- initial：设置该属性为它的默认值
- inherit：从父元素继承该属性
*/

flex-flow：flex-direction flex-wrap（复合属性）

justify-content（设置子元素在主轴上的对齐模式）

justify-content: flex-start / flex-end / center / space-between / space-around / initial / inherit;
/*参数说明：
- flex-start：项目位于容器的开头（默认）
- flex-end：项目位于容器的结尾
- center：项目位于容器的中心
- space-between：项目位于各行之间留有空白的容器内
- space-around：项目位于各行之前、之间、之后都留有空白的容器内
- initial：设置该属性为它的默认值
- inherit：从父元素继承该属性
*/

align-items（设置子元素在交叉轴上的对齐模式）

align-items: stretch / center / flex-start / flex-end / baseline / initial / inherit;
/*参数说明：
- stretch：项目被拉伸以适应容器（默认）
- center：项目位于容器的中心
- flex-start：项目位于容器的开头
- flex-end：项目位于容器的结尾
- baseline：项目位于容器的基线（以内容为准）上
- initial：设置该属性为它的默认值
- inherit：从父元素继承该属性
*/

align-content（控制容器内多行在交叉轴上的排列方式）

align-content: stretch / center / flex-start / flex-end / space-between / space-around / initial / inherit;
/*参数说明：
- stretch：项目被拉伸以适应容器（默认）
- center：项目位于容器的中心
- flex-start：项目位于容器的开头
- flex-end：项目位于容器的结尾
- space-between：项目位于各行之间留有空白的容器内
- space-around：项目位于各行之前、之间、之后都留有空白的容器内
- initial：设置该属性为它的默认值
- inherit：从父元素继承该属性
*/

order（定义项目的排列顺序）

order: <integer>;
/*使用说明：
- 与主轴方向有关（默认为主轴方向）
- 数值越小，排列越靠前，默认为0*/

flex-grow（定义项目的放大比例）

flex-grow: <number>;
/*使用说明：
- 需要主轴方向上有多余的空间可以让项目去“伸展”；
- 如果所有的项目有一样的flex-grow，它们会等分多余的空间；
- 值越大，占比越多，不能为百分比；
- 默认值为0，表示不去放大*/

flex-shrink（定义了项目的缩小比例）

flex-shrink: <number>;
/*使用说明：
- 需要主轴方向上的空间不够，项目被压缩；
- 值越大，被压缩的越多；
- 值越小，被压缩的越小；
- 默认值为1，项目缩小*/

flex-basis（定义了在分配多余空间之前，项目占据的主轴空间）

flex-basis: <length> / auto;
/*使用说明：
- 值可以是像素px，也可以是百分比；
- 默认值为auto，即项目的本来大小*/

flex（flex-grow, flex-shrink 和 flex-basis的复合属性）

flex: none /  <'flex-grow'> || <'flex-shrink'> || <'flex-basis'> 
/*使用说明：
- 两个快捷键：auto（1 1 auto）、 none（0 0 auto）;
- 只写一个数值，则表示flex-grow，后面两个为 1 0；
- 默认值为：0 1 auto（后两个属性为可选）*/

align-self（允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性）

align-self: auto / flex-start / flex-end / center / baseline / stretch;
/*使用说明：
- 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch*/