flex弹性布局

 

flex弹性布局

　　　　https://www.runoob.com/w3cnote/flex-grammar.html

　　容器属性

　　　　flex-direction: 主轴方向（横向、纵向）

　　　　　　row:  横向 默认  （row-reverse）

　　　　　　column: 纵向  （column-reverse：反转）

　　　　flex-wrap: 是否换行

　　　　　　nowrap: 不换行 默认

　　　　　　wrap: 换行

　　　 · 　　wrap-reverse ：换行第一行在下边

　　　　flex-flow： 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

　　　　　　flex-flow: <flex-direction> <flex-wrap>

　　　　justify-content: 对齐方式

　　　　　　center： 居中

　　　　　　flex-start：左对齐默认

　　　　　　flex-start：右对齐

　　　　　　space-between：两端对齐，项目之间的间隔都相等

　　　　　　space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

　　　　align-item: 交叉轴对齐方式

　　　　　　flex-start： 起始对齐

　　　　　　flex-start：终点对齐

　　　　　　center： 居中对齐

　　　　　　stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

　　　　　　baseline: 项目的第一行文字的基线对齐

　　　　align-content： 多个轴的对齐方式

　　　　　　flex-start：

　　　　　　flex-end：

　　　　　　center

　　　　　　space-between:

　　　　　　space-around

　　项目属性

　　　　flex-grow：属性定义项目的放大比例，　　

　　　　　　默认为0，即如果存在剩余空间，也不放大。

　　　　　　如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

　　　　flex-shrink：属性定义了项目的缩小比例，

　　　　　　默认为1，即如果空间不足，该项目将缩小。

　　　　　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

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

　　　　　　auto、 flex-start、 flex-end 、 center 、 baseline 、 stretch