【弹性布局的基础知识点】

---

前言

在css3中我们经常用到弹性布局来进行布局，他有很多的优点

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、弹性布局的优点

• 适应性强，在做不同屏幕分辨率的界面时非常实用
• 可以随意按照宽度·比例划分元素的宽高
• 可以轻松改变元素的显示顺序
• 自适应布局实现快捷，易维护

二、弹性盒子

如果想使用弹性布局，那么必须将父元素做成弹性空间，这样子元素就可以变成弹性盒子

代码如下（示例）：

        display:flex;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;

注意：弹性盒子具有主轴和交叉轴

三、 生效在父容器的属性

（1）确定主轴方向

在弹性容器中，元素按照主轴排列
flex-direction:
row 默认值
row-reverse 反向行是主轴
column 列是主轴
column-reverse 反向列做主轴

（2）主轴是否换行

flex-wrap: nowrap | wrap | wrap-reverse;

（3）主轴的对齐方式

justify-content:

1. flex-start (默认值) : flex 项从主轴的开始位置（main-start）开始排布。

2. flex-end : flex 项从主轴的结束位置（main-end）开始排布

3. center: flex 项沿主轴居中排布。

4. space-between: flex 项沿主轴均匀排布，即我们常说的沿主轴 两端对齐 ，第一个flex 项在主轴开始位置，最后一个flex 项在主轴结束位置。

5. space-around: flex 项沿主轴均匀排布。要注意的是 flex 项看起来间隙是不均匀的，因为所有 flex 项两边的空间是相等的。第一项在容器边缘有一个单位的空间，但是在两个 flex 项之间有两个单位的间隙，因为每个 flex 项的两侧都有一个单位的间隙。

6. space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。

（4）交叉轴的对齐方式

align-items:

1. flex-start (默认值) : flex 项从主轴的开始位置（main-start）开始排布。
2. flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐。
3. center: flex 项以交叉轴为中心，居中对齐。
4. baseline: flex 项按照他们的文字基线对齐。
5. stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性， 先应用这些尺寸属性。

（5）分配交叉轴的剩余空间

align-content:
1.flex-start：多行在容器的交叉轴开始位置排布
2. flex-end：多行在容器的结束位置排布
3. center：多行在容器的中间位置排布
4. space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置
5. space-around: 多行均匀分布，并且每行的间距（包括离容器边缘的间距）相同；
6. stretch（默认值）：占满整个交叉轴。前提不设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性

（6）生效在子元素身上的属性

    1> order 排序，值越小，排名越靠前，默认值是0

	2> flex-grow: 定义子元素的放大比例; 默认值是0，不放大！

	3> flex-shrink: 1; 定义元素在主轴占不下时的缩小比例，默认值是1，表示等比缩小！

	4> flex: flex-grow flex-shrink flex-basis;
		默认: 0 1 auto;
    5> align-self: 他的值跟align-items的值一模一样，只是，此属性是设置某一个元素的交叉轴对齐方式