flex布局

flex布局被称为弹性布局，让元素跟随页面大小的改变而改变。flex布局的出现是由于浮动会脱离文档流，如果子元素浮动，而父元素没有高度，会引起页面塌陷，需要清除浮动。但flex布局不兼容老版本浏览器，更适用于移动端。

1.容器的属性

1.1 flex-direction

设置主轴方向

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

row： 默认，主轴为水平方向，从左向右排列
row-reverse： 主轴为水平方向，从右向左排列
column： 主轴为垂直方向，从上到下排列
column-reverse： 主轴为垂直方向，从下到上排列

1.2 flex-wrap

是否换行

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

nowrap： 默认，不会自动换行
wrap： 换行，第一行在上方
wrap-reverse： 换行，第一行在下方

1.3 justify-content

主轴上的对齐方式

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

flex-start： 默认，左对齐
flex-end： 右对齐
center： 居中
space-between： 两端对齐，相互之间的间隔相等
space-around： 每个容器之前，之间，之后都留有空白

1.4 align-items

辅轴上的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

假如辅轴为y轴
stretch（默认值）： 如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start： 排列在辅轴顶部
flex-end： 排列在辅轴底部
center： 排列在辅轴中心位置
baseline： 让项目以第一行文字的基线为参照进行排列

1.5 align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

2.项目的属性

2.1 flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

2.2 flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

2.3 flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。(可以理解为元素的width值或height值)

2.4 flex

flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

2.5 order

元素的排列顺序

2.6 align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

2.7 gap(新增)

分为row-gap（行间距）和column-gap（列间距），如果有的话，默认是行间距

更多flex布局详情

css flex布局中妙用margin: auto