网页布局有标准流、百分比布局、浮动、grid网格布局，还有就是现在比较流行的flex布局，下面介绍一下

1. flex布局兼容性

先说下flex布局其实大量使用于移动端，因为pc端浏览器非常多，浏览器的版本也非常多，下图为已兼容flex的浏览器和设备版本（青色和绿色的表示已兼容）

Android
- 2.3 开始就支持旧版本 display:-webkit-box;
- 4.4 开始支持标准版本 display: flex;
IOS
- 6.1 开始支持旧版本 display:-webkit-box;
- 7.1 开始支持标准版本display: flex;
PC ie10开始支持，但是IE10的是-ms形式的

2. flex介绍

Flex布局是一种浏览器提倡的布局模型，布局网页更加灵活、更加简单。基于Flex精确灵活控制块级盒子的布局方式，非常适合结构化布局，flex可以让

可以让多个盒子横向排列，不再使用浮动
可以通过设置横纵向的布局方式改变盒子之间的间距，不再需要给每个盒子设置margin值
不会出现脱标，不再需要清除浮动
不会出现塌陷的问题（浮动的盒子也没有塌陷的问题）

设置方式是给盒子的亲父元素（不能跨代）添加display:flex并同时设置对齐方式的属性，子元素可以自动的挤压或拉伸，就不再有块级元素、行内元素和行内块元素的概念了，a标签弹性盒子可以设置宽高了。

flex父盒子称为弹性容器，里面的子元素称为flex元素或者flex项或者弹性盒子

2.1. 主轴对齐方式

.box {
            display: flex;
            /* justify是两端对齐的意思 */
            /* 默认居左 */
            justify-content: start;
            /* 居右 */
            justify-content: end;
            /* 居中 */
            justify-content: center;
            /* 盒子之间间隙是两侧间隙的两倍 */
            justify-content: space-around;
            /* 两端对齐 两侧没有间隙 中间盒子间均分 */
            justify-content: space-between;
            /* 盒子之间间隙和两侧间隙一般大 */
            justify-content: space-evenly;
        }

属性值	意义
flex-start/start	默认值，起点开始依次排列居左
flex-end/end	终点开始依次排列居右
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间的间距相等
`justify-content: space-around;`盒子之间间隙是两侧间隙的两倍

`justify-content: space-between`两端对齐两侧没有间隙中间盒子间均分

`justify-content: space-evenly`盒子之间间隙和两侧间隙一般大

2.2. 侧轴对齐方式

2.2.1. 使用align-items调节元素在侧轴的对齐方式

给父盒子设置

属性值	作用
flex-start/start	默认值，起点开始依次排列居上
flex-end/end	终点开始依次排列居下
center	沿侧轴居中排列（中线对齐）
stretch	默认值,弹性盒子沿着主轴线被拉伸至铺满容器

2.2.2. 使用align-self控制某个弹性盒子的竖直对齐方式

给子盒子设置属性值同align-items一样

 .box {
             height: 700px;
             display: flex;
             /* 默认值 居上 */
             align-items: flex-start;
             /* 居下 */
             align-items: end;
             /* 居中  中州对齐 */
             align-items: center;
             /* 默认值。弹性盒子不设高度,高度拉伸至100%不设置默认拉伸 设了高度stretch失效*/
             align-items: stretch;
             /* 一行元素基线对齐 */
             /* align-items: baseline; */
             border: 2px solid pink;
         }
         .box>div {
             width: 200px;
             /* height: 200px; */
             background-color: aqua;
         }
         .box>div:nth-child(2) {
             background-color: pink;
             align-self: end;
         }

align-self和align-items有baseline属性值（不常用）,让一行元素基线对齐（参考vertical-align对齐属性）

2.2.3. 子盒子在父盒子内水平垂直居中

 .box {
             display: flex;
             justify-content: center;
             align-items: center;
             width: 200px;
             height: 100px;
             background-color: pink;
         }

2.3. 伸缩比

使用flex属性修改弹性盒子的伸缩比，实际就是分份数，给每个弹性盒子分几份语法： flex:值（单纯的阿拉伯数字，无负值小数）特点：

只占用父盒子剩余尺寸
给弹性子盒子设置

同时设置了width和flex值，会优先执行flex伸缩比

开发中有以下两种使用方法：

给每个弹性子盒子都设置flex值

给某个或某几个子盒子设置固定宽度，给其他剩余的弹性子盒子设置flex值，用剩余的父盒子空间去分份数

2.4. 圣杯布局

两边固定不动，中间可以任意伸缩，一般用在网页的头部

    <style>
        .box {
            display: flex;
            /* 父盒子不能给固定宽度，要占满整个屏幕 */
            /* width: 600px; */
            height: 200px;
            border: 1px solid pink;
        }
        .box div:nth-child(2n-1) {
            width: 50px;
            background-color: pink;
        }
        .box div:nth-child(2) {
            flex: 1;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

布局中未设置宽高由内容撑大时，弹性盒子会撑大父盒子剩余的宽度，可以给某个盒子设置最小宽度避免被挤压到太小到文字竖直显示，语法：给盒子设置min-width就可以，同时还有min-height、max-width、max-height

2.5. 转换主轴方向

使用flex-direction改变元素排列方向，主轴默认是水平方向，侧轴默认是垂直方向，给弹性容器设置

属性值	意义
row	默认值水平
column	列垂直常用
row-reverse	行从右向左不常用
column-reverse	列从下向上不常用
应用：

通常在几个子盒子竖直显示时，同时需要竖直居中（中线对齐）时，可以转换主轴的方向，然后设置justify-content和align-items的属性（用的很多）

2.6. 弹性盒子换行

默认情况下，多个弹性盒子在弹性容器内在一行显示，尽管弹性盒子设置了固定宽度，会不断挤压到一行显示

给父盒子设置设置flex-wrap:wrap,会自动换行，默认值是nowrap不换行

2.7. 侧轴多行对齐

使用行对齐align-content调整多行排列效果，搭配flex-wrap:wrap使用

属性值同justify-content一样：start、end、center、space-around、space-between、space-evenly

 .box {
            display: flex;
            flex-wrap: wrap;
            /* align-content: space-evenly; */
            align-content: center;
            width: 800px;
            height: 800px;
            background-color: pink;
        }
        .box>div {
            width: 180px;
            /* 不设高度，不设align属性。高默认是拉伸效果 */
            /* 设置了高度 align-content属性的默认值为stretch 会默认出现行间距 通过设置align属性消去这些间距*/
            height: 200px;
            background-color: orange;
        }

单行：align-items 单行用的比较多一些（中线对齐）

字码的比较多，眼睛有点花，可能出现错误，欢迎纠正~

较为流行的flex布局~