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