flex布局

概念

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

例子

任何一个容器都可以指定为flex布局

.box{
  display: flex;
}

行内元素也可以使用flex布局

.box{
  display: inline-flex;
}

注意点

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

属性

flex-direction

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

主轴的方向，即水平排列方向。

flex-wrap 换行的方向

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

flex-flow

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content 主轴上的对齐方式

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

align-items 交叉轴上对齐
align-content 多根轴线对齐方式

附详细学习链接：添加链接描述