Flex布局入门

父元素

display: flex

.container {  display: flex;
}

flex-direciton

.container {  flex-direction: row | row-reverse | column | column-reverse;
}

1. row，默认值，水平从左到右

2. row-reverse，1相反

3. column 垂直从上到下

4. column-reverse 3相反

flex-wrap

设置当子元素超过父元素时是否换行，上面方法设置换行的方向

.container {  flex-wrap: nowrap | wrap | wrap-reverse;
}

1. 不换行，默认值。
   其他字面意思

flex-flow

flex-direction和flex-wrap的缩写，默认值row nowrap

flex-flow: <'flex-direction'> || <'flex-wrap'>;

justify-content

设置横轴方向上的对齐方式

.container {  justify-content: flex-start | flex-end | center | space-between | space-around ;
}

align-items

设置垂直方向上的对齐方式

.container {  align-items: flex-start | flex-end | center | baseline | stretch(拉伸);
}

align-content

设置整体的对齐方式(用的比较少，适用于多行)

.container {  align-content: flex-start | flex-end | center | baseline | stretch(拉伸) | space-between | space-around ;
}

---

子元素

order

.item {  order: <integer>;
}

使得子元素按照order顺序呈现，数值小的在前面

align-self

可以设置子元素针对自己纵轴方向上的对齐方式，可以覆盖父容器align-items的设置

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

作者：徐金俊
链接：https://www.jianshu.com/p/a004f1f96ea8