#flex布局(1)-父容器

flex布局-父容器

Property #1: Display: Flex

给父容器设置
display:flex

这就创造了flex context，其子元素就会变为inline元素。

Property #2: Flex Direction

一个Flexbox的容器，它有一个main axis(主轴)和一个cross axis(副轴)。
默认情况下，元素沿着横轴，从左往右排列。

flex-direction: column 主轴沿垂直方向
flex-direction: column-reverse 主轴沿垂直方向由下到上
flex-direction: row 主轴沿水平方向
flex-direction: row-reverse 主轴沿水平方向 主轴沿垂直方向从左到右

Property #3: Justify Content

justify-content:有5种选项
Flex-start 在头部紧凑排列
Flex-end 在尾部紧凑排列
Center 在中间紧凑排列
space-between 分散排列(空白只在两个元素间)
space-around 分散排列(空白包围着元素)

Property #4: Align Items

以flex-direction: row为例
flex-start 吸附在上部，且元素顶边对齐
flex-end 吸附在下部，且元素底边对齐
center 吸附在中部，且元素垂直居中
stretch 上下拉伸
baseline 不改变吸附，垂直居中

Property #5: Align Self

可以单独修改某个元素的的吸附位置，将覆盖掉Align Items

参考文章：https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35