css flex容器属性总结

启用flex

display:flex;

设置flex位置

flex-disrection属性：

• row-reverse 行元素反转
• column-reverse 列元素反转
• row 元素都排列在同一行（默认）
• column 元素都排列在同一列

设置行对齐方式

justify-content属性：
*center 水平居中对齐

• flex-start 左对齐（默认）
• flex-end 右对齐
• space-between 两端对齐（中间可能会有空缺）
• space-around 中间分开两半然后分别居中对齐
• sparce-evenly 平均分配中间

设置列对齐方式

align-items属性：

• center 垂直居中对齐
• flex-start 顶部对齐
• flex-end 底部对齐
• stretch 拉伸填充（默认）
• basseline 将项目与其基准对齐。基线是一个文本概念，可将其视为字母所在的行。

包装项目

flex-wrap属性：

• nowrap 不包装项目(默认)
• wrap 从左到右包装
• wrap-reverse 从右到左包装

缩小项目

flex-shrink属性：flex-shrink值为1，而另一个项目的flex-shrink值为3，则值为的项目3将缩小为另一个项目的3倍

放大项目

flex-grow属性：flex-grow值为1，而另一个项目的flex-grow值为3，则值为的项目3将放大为另一个项目的3倍

设置初始大小：

flex-basis属性：指定flex-shrink或flex-grow的初始大小。

flex-basis:20em;

快速设置flex属性

flex属性：

flex:1 1 150px;

参数位置关系
flex:flex-grow flew-shrink flex-basis;

flex排序

order属性：order小的值会排在order值大的前面，可以使用负数

单独设置flex的列对齐

align-self属性：align-self接受与align-items该align-items属性相同的值，并将覆盖该属性设置的任何值