flex布局学习心得

基础

1，容器container（display: flex）

子元素item会由block→inline-block。即 display: block 无效。（此时会从左往右排列）
想得到纵向布局，引入flex-direction: column

2，flex-direction: row-reverse, column-reverse即实现倒序(实质是方向转换)

倒序排布之后，方向也变为从右，底开始。
正序：靠左----1，2，3
倒序：靠右----3，2，1

3，justify-content对齐方向(与flex-direction相同)

justify-content：flex-start/flex-end/center/space-between/space-around
space-between：左右靠边，等距排列（或上下）（平均分布）
space-around：（等距分布）类似于margin相等

4，align-items align-content对齐方向(与flex-direction垂直)

前者是针对一行，后者针对多行
align-items：flex-start/flex-end/center/baseline/strench
baseline:基线对齐，（当字体大小多变时，会出问题）
stretch:未设置具体宽高时，对应方向拉伸

5，换行，flex-wrap

flex-wrap：no-wrap(默认)/wrap
no-wrap：总宽度（长）超出容器，则平均分配，每个item宽度自适应
wrap：换行之后的元素会居中显示（可以设置容器高度不富余即可）

6，display：inline-flex

应用这个在容器上，使容器宽度自适应，消除块特性

7，flex-flow：flex-direction || flex-wrap

---

高级

1，order

排序

2，flex-grow

放大比例，默认为0，就是不放大；
如果都为1，大家等比例占用flex容器，有一个是2，就两倍尺寸

3，flex-shrink

缩小比例，默认为1：即空间不足，会等比例缩小；
若设置为0，则不缩小。无负数

4，flex-basis

项目分配剩余空间之前，元素占用的大小，默认auto，本来大小；也可设置px；

5，flex

lex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6，align-self

允许单个项目有与其他项目不一样的对齐方式;
默认值为auto，表示继承父元素的align-items属性;
可覆盖align-items

---

举个例子

想要实现下图的效果：从左至右依次排列，超出换行。
只需要这样写就可以了

排列效果

.wrap {
    display: flex;
    justify-content: flex-start;
}
.item {
    flex: 0 0 320px;
}