Flex弹性布局

简介

Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性

容器

任何容器都可以指定Flex布局，设置后，子元素的float,clear,vertical-align都失效

.box {
  display: flex;
  display: inline-flex;   //行内元素也可以使用Flex布局
}

容器属性

• flex-direction
  定义容器的子元素的排列方向

row（默认值）: 水平方向，起点为左边
row-reverse: 水平方向，起点为右边
column: 垂直方向，起点为上端
column-reverse: 垂直方向，起点为下端

• flex-wrap
  定义如果一条轴排不下时，怎么换行

nowrap（默认值）: 不换行
wrap: 换行，第一行在上方
wrap-reverse: 换行，第一行在下方

• flex-flow
  flex-direction属性和flex-wrap属性的简写，默认row nowrap

flex-flow: row nowrap

• justify-content
  定义子元素在主轴（水平轴）的对齐方式