display：flex 弹性布局

flex 弹性布局

---

---

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

一、关于flex的初步了解

1. flex是什么，以及其优点

flex 就是flexible box的缩写，意为弹性布局，用来为盒子模型提供最大的灵活性
· 适应性强，在做不同屏幕分辨率的界面时非常实用
· 可以随意按照宽度、比例划分元素的宽高
· 可以轻松改变元素的显示顺序
· 自适应布局实现快捷，易维护
· 方便解决元素方块居中的问题

2. flex基础了解

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

	display：flex的写法，主流浏览器的兼容写法
	
	display:flex;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;

一个盒子如果变成弹性容器，那么此盒子就具有了两个轴：主轴、交叉轴！

3. flex 双轴

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

· 默认水平方向为主轴（main axis）

· 默认垂直方向为交叉轴、侧轴

· 项目默认沿主轴排列

二、flex 关于容器的属性（flex container）

1、flex-direction [决定主轴的方向]:

/* 主轴方向 row水平方向为主轴 */
flex-direction: row;
/* 反转主轴方向，起点在左端/右端 */
flex-direction: row-reverse;
/* 主轴为垂直方向 */
flex-direction: column;
/* 反转垂直主轴方向，起点在上沿/下沿 */
flex-direction: column-reverse;

2.flex-warp [ 主轴方向是否换行 ]

代码如下（示例）：

/*不换行压缩宽度*/
 nowrap (默认值) 
 /*换行*/
 wrap
 /*反向换行*/
 wrap-reverses 

提示 不换行会压缩宽度

        .list{
            width: 700px;
            height: 500px;
            background-color: #ccc;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: flex-start;
        }
        .list li{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: blue;
            font-size: 36px;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            color: #fff;
        }

换行则不会

        .list{
            width: 700px;
            height: 500px;
            background-color: #ccc;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .list li{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: blue;
            font-size: 36px;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            color: #fff;
        }

3.justify-content (主轴元素对齐方式)

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

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

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

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

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

· space-evenly: 任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。（注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持 ）

二、align-items [项目] 在交叉轴上对齐方式 [单轴]

1. align-items:

· flex-start: flex 项按照交叉轴的开始位置（cross-start）对齐。

· flex-end: flex 项按照交叉轴的结束位置（cross-end）对齐。

· center: flex 项以交叉轴为中心，居中对齐。

· baseline: flex 项按照他们的文字基线对齐。

注意 文字基本是对齐的（一般用不到）
· stretch (默认值) : 拉伸 flex 项以填充整个容器（这里特别要注意：如果 flex 项有尺寸属性（min-width / max-width / width / min-height / max-height / height），那么首先应用这些尺寸属性，伸展，就是会填充宽度。

三 、align-content

此属性只有在交叉轴有多条内容时才生效
· flex-start：多行在容器的交叉轴开始位置排布

· flex-end：多行在容器的结束位置排布

· center：多行在容器的中间位置排布

· space-between：多行均匀分布；第一行分布在容器的开始位置，最后一行分布在容器的结束位置

· space-around: 多行均匀分布，并且每行的间距（包括离容器边缘的间距）相同

· space-evenly：任何两个 flex 项之间的间距（以及到 flex 容器边缘的空间）相等。（注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。

· stretch（默认值）：占满整个交叉轴。前提不设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性设置大小属性

四 生效在子元素身上的属性

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

        .list li{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: blue;
            font-size: 36px;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            color: #fff;
            order: 10;
        }

        .list li:nth-child(2){
            order: 3;
        }

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

3> flex-shrink: 1; 定义元素在主轴占不下时的缩小比例，默认值是1，表示等比缩小！
当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义

4> flex: flex-grow flex-shrink flex-basis;
默认: 0 1 auto;

	经常会用到的两个书写方式：
			flex: auto | none;
			auto: 1 1 auto; 开启子选项的放大行为
			none: 0 0 auto; 关闭子选项的缩小行为

5> align-self: 他的值跟align-items的值一模一样，只是，此属性是设置某一个元素的交叉轴对齐方式生效在子元素身上的属性