Css3的Flex布局
开发工具与关键技术：DW
作者：汪秋霞
撰写时间：2019/1/18
我们在布置页面布局时，使用flex布局可以达到很好的页面效果。
Flex是flexible box的缩写，flex布局又称为弹性布局，可以为盒模型提供最大的灵活性，任何一个容器都可以通过display属性设置flex布局。而display属性又有flex和inline-flex两种办法设置弹性布局。设置了flex布局的元素可称为容器，其直接承接的子元素则称为项目。
通过display：flex设置弹性布局，其项目的宽度会随着页面可显示区域的宽度而进行压缩调整。而通过display：inline-flex设置弹性布局，其项目的宽度则不会随着页面可显示区域的宽度而进行压缩调整，而是适应设置好的宽度，行内元素以此设置弹性布局。（注：设置flex布局后，其项目的就会失去float属性的效果。）
例：
代码
Html代码：
<body>
<p>flex：</p>
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="inline-flex">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
Css代码：
<style type="text/css">
*{
margin: 0;
}
.flex{
display: flex;
background: #eaeaea;
height: 100px;
}
.flex div,.inline-flex div{
width: 100px;
height: 100px;
background: #F4CA85;
text-align: center;
line-height: 100px;
font-size: 50px;
color: #fff;
}
.inline-flex div{
background: pink;
}
</style>
页面显示：
压缩前：
压缩时：
Flex布局可以对容器同时设置多个弹性布局的属性，常见的几个属性如下：
(1) flex-direction
(2) flex-wrap
(3) flex-flow（它是flex-direction和flex-wrap的简写）
(4) justify-content
(5) align-content
(6) align-items
下面我选择其中几个进行介绍。
（下图每一页面显示截图只调用代码中被注释代码中相对应的一条，其他代码基本如上，只根据需要改变部分宽高值。主轴方向均为从左往右）
.flex{
display: flex;
background: #eaeaea;
height: 100px;
/*flex-direction: row;*/
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
/*flex-wrap: nowrap;*/
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse;*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-around;*/
/*justify-content: space-between;*/
}
- flex-direction属性决定主轴的方向，它有4个值：
(1)row：水平方向从左往右排列，同时row也是默认值。
(2)row-reverse：水平方向从右往左排列。
(3)column：垂直方向从上往下排列。
(4)column-reverse：垂直方向从下往上排列。
2. flex-wrap属性表示换行，当页面显示的区域宽度不够时，多余的部分转换到下一行。它有三个值。（换行方向会随着主轴方向转变）
（1） nowrap:不换行，项目会挤压在一行内，同时nowrap也是默认值。
（2） wrap：从上往下换行。
（3） wrap-reverse：从下往上换行。
3. justify-content属性决定水平方向的对齐方式，当页面宽度有较多部分的留白时，justify-content属性可以很好的处理这些留白。它有5个值。
（1） flex-start：紧挨左边对齐，flex-start是默认值。
（2） flex-end：紧挨右边对齐。
（3） center：从中心对齐。
（4） space-around：平均分布留白作为项目两侧的间隔。
（5） space-between：平均分布留白作为项目之间的间隔。
这里就为大家介绍这几个属性，如果有兴趣可以自己敲来试一下，如果把这些属性合起来用可以得到更棒的效果。