flex弹性布局的用法

1、概念：

flex弹性布局是css3的新一种布局方式，用来为盒状模型提供最大的灵活性，元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。

2、用法：

1)首先在我们不使用flex弹性布局时候 它们排列是默认这样的，是纵向排列的，如下图

2）使用flex弹性布局时，它们的排列是这样的，变成横向排列，需要注意的是display:fex必须放在子级的父级上，如下图

3）flex弹性布局的一些常用的属性：也需要注意的是使用它们也需要加个display:flex一起使用。

1.flex-direction：

flex-direction用于改变弹性布局的主轴方向。

加display：flex会默认添加flex-direction：row属性，所以加弹性布局后，子元素的默认主轴方向会从上到下变为从左到右。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2.justify-content：

justify-content用于控制元素在主轴上的对齐方式。默认flex-start左对齐。

应用场景：常用于元素的两端对齐。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，元素之间的间隔都相等。

space-around：每个元素两侧的间隔相等。

 

 3.align-items：

 align-items用于控制元素在交叉轴上对齐方式。

应用场景：配合justify-content属性使用，完成子元素的垂直水平居中

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

4.flex-wrap：

flex-wrap用于控制元素是否换行，默认nowrap不换行

 应用场景：在弹性布局中，子元素的宽的总和大小大于父元素时，默认不换行，会对子元素造成压缩导致数据显示不全的问题。

nowrap（默认）：不换行。此时父级宽度为600px，而子级宽度为150加起来已经超过父子宽度，使用flex时，默认是nowrap不会自动换行，保持在一行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

 

 5、如何让子级处在水平垂直居中。