Flex弹性布局

Flexible Box Layout Mode 

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*/