flex 布局

flex

• 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
• 每根轴都有起点和终点，这对于元素的对齐非常重要。
• 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

容器属性

• flex-direction
  默认值： row

div {
	display: flex;
	flex-direction: row | coloum | row-reverse | column-reverse
}

• flex-wrap
  默认值：no-wrap

div {
	flex-wrap: nowrap | wrap | wrap-reverse
}

• flex-flow
  flex-direction与 flex-wrap 的缩写，默认值：row nowrap

div {
 flex-flow: row nowrap
}

• justify-content
• align-items
• align-content

项目属性

• order
• flex-grow
  默认值为 0，即存在剩余空间也不放大
• flex-shrink
  默认值为 1，即主轴空间不足，等比缩小
• flex-basis
• flex
  flex-grow, flex-shrink, flex-basis 缩写。
• align-self

参考链接

彻底弄懂 flex 布局
align-content属性详解