Flex布局七千字保姆级教程：新手速成宝典

Flex布局是一款强大的布局系统，能简便的、弹性地实现各种布局。它是一款全面支持各种常见布局模型的框架，包括单列布局、网格布局、伸缩布局等等。

得益于属性设置的声明性，Flex布局开发快而灵活。Flex布局同时适用不同屏幕分辨率的浏览器，并且兼容IE10以上版本。

本篇文章将会分别对Flex布局的几个重要属性进行详细讲解，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items。

flex-direction

flex-direction是Flex布局中的一个重要属性，它决定了子元素在主轴（flex-direction的初始值）上的排列方式。

flex-direction有四个属性值：row、row-reverse、column、column-reverse。

• row：从左到右排列，子元素按顺序横向排列。
• row-reverse：从右到左排列，子元素按顺序横向排列，但次序与row相反。
• column：从上到下排列，子元素按顺序纵向排列。
• column-reverse：从下到上排列，子元素按顺序纵向排列，但次序与column相反。

flex-wrap

flex-wrap决定了当所有元素排布不下一行或者一列时，是否进行换行或分页。

flex-wrap有三个属性值：nowrap、wrap、wrap-reverse。

• nowrap：子元素不换行，单行或者单列排列。
• wrap：子元素换行或分页，换行时下一行或者下一页与当前行列的反方向排列。
• wrap-reverse：子元素换行或分页，换行时下一行或者下一页与当前行列的方向相同。

flex-flow

flex-flow属性可以同时设置主轴排列方向和换行方式。

flex-flow的第一个属性值和flex-direction的属性值相同，第二个属性值和flex-wrap的属性值相同。

justify-content

justify-content决定了子元素在主轴上的位置。

justify-content有六个属性值：flex-start、flex-end、center、space-between、space-around、space-evenly。

• flex-start：子元素靠近主轴起点排列。
• flex-end：子元素靠近主轴终点排列。
• center：子元素居中排列。
• space-between：子元素在主轴上平均分配，但两端边距为0。
• space-around：子元素在主轴上平均分配，包括两端边距。
• space-evenly：子元素在主轴上平均分配，但第一项和最后一项在两端的边距为一半。

align-items

align-items决定了子元素在交叉轴上的位置。

align-items有六个属性值：flex-start、flex-end、center、baseline、stretch、space-between、space-around、space-evenly。

• flex-start：子元素靠近交叉轴起点排列。
• flex-end：子元素靠近交叉轴终点排列。
• center：子元素在交叉轴上居中排列。
• baseline：子元素以文本基线对齐。
• stretch：子元素的高度拉伸至与容器相同。
• space-between：子元素在交叉轴上平均分配，但上、下边距为0。
• space-around：子元素在交叉轴上平均分配，包括上、下边距。
• space-evenly：子元素在交叉轴上平均分配，但第一项和最后一项在上下两端的边距为一半。