CSS--flex

一、容器属性：

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-contents

1.1 flex-direction

决定容器成员的排列方向

属性值：

flex-direction: row | row-reverse | column | column-reverse;

1.2 flex-wrap

决定容器成员的换行规则

属性值：

flex-wrap: nowrap | wrap | wrap-reverse;

1.3 flex-flow

flex-direction和flex-wrap的简写形式

默认属性值：

flex-flow: row nowrap;

1.4 justify-content

决定容器成员在x轴的对齐方式

属性值：

justify-content: flex-start | flex-end | center | space-between | space-around;

1.5 align-items

决定容器成员在y轴的对齐方式

属性值：

align-items: flex-start | flex-end | center | baseline | stretch;

1.6 align-contents

决定多行容器成员在y轴的对齐方式

属性值：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

二、容器成员属性：

• order

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

2.1 order

决定容器成员的排列顺序（从小到大）

属性值：

order: <number>;

2.2 flex-grow

决定容器成员的放大比例（默认为0，即有空余也不放大）

属性值：

flex-grow: <number>; /* default 0 */

2.3 flex-shrink

决定容器成员的缩小比例（默认为1，即空间不足则缩小）

属性值：

flex-shrink: <number>; /* default 1 */

2.4 flex-basis

决定容器成员占据的x轴空间（浏览器根据该属性判断x轴空间是否富余，默认值为auto，即为容器成员本来大小）

属性值：

flex-basis: <length> | auto; /* default auto */

2.5 flex

flex-grow、flex-shrink和flex-basis的简写形式

快捷属性值：

flex: auto ( 1 1 auto ) | none ( 0 0 auto );

单值语法:
值必须为以下其中之一：
一个无单位数 (<number>): 它会被当作 flex:<number> 1 0; <flex-shrink>的值被假定为 1，然后<flex-basis> 的值被假定为0。
一个有效的 宽度 (width) 值：它会被当作 <flex-basis> 的值。
关键字none，auto或initial.

flex: 1 ( 1 1 0 );

2.6 align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;