Flex弹性布局一文详解

Flex弹性布局是W3C在2009年提出的新的布局方式，内含的大量的属性，使其可以方便，有效，高适配，响应式的进行页面布局。是目前前端开发的一种重要的布局。

一、简介
Flex布局是对容器设置的一种布局方式。通过对容器进行display: flex;实现修改容器为Flex弹性布局。再通过一系列属性设置，达到对容器内的元素进行控制。

二、容器（父元素）的属性

1. flex-direction
2. justify-content
3. align-items
4. flex-wrap
5. flex-flow
6. align-content

1. flex-direction
Flex布局中存在主轴和副轴的概念，flex-direction就是设置主轴方向的属性。设置完主轴方向，另一个方向即为副轴。有以下4个值

flex-direction: row | row-reverse | column | column-reverse;

• row（默认值）：主轴为水平方向，起点在左端。
  
• row-reverse：主轴为水平方向，起点在右端。
  
• column：主轴为垂直方向，起点在上沿。
  
• column-reverse：主轴为垂直方向，起点在下沿。
  

2. justify-content
justify-content是设置元素在主轴方向上的位置。有以下5个值
（例子采用默认主轴方向是水平，左到右）

justify-content: flex-start | flex-end | center | space-between | space-around;

• flex-start(默认)主轴方向首对齐
  
• flex-end 主轴方向尾对齐
  
• center 主轴方向居中对齐
  
• space-between 主轴方向第一个和最后一个元素贴边，其他元素平分剩下的空间
  
• space-around 主轴方向所有元素平分所有空间
  

3. align-items
align-items是设置元素在副轴方向上的位置。有以下5个值
（例子采用默认副轴方向上到下）

align-items: flex-start | flex-end | center | stretch | baseline;

• flex-start 副轴方向首对齐
  
• flex-end 副轴方向尾对齐
  
• center 副轴方向居中对齐
  
• stretch （默认值）如果子元素未设置高度或设为auto，将占满整个容器的高度
  
• baseline 子元素的第一行文字的基线对齐
  

4. flex-wrap
flex-wrap是设置换行的属性，有以下3个值（例子的父元素高宽都为40px，子元素高20px，宽10px）

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

• nowrap （默认）不换行，超出父元素大小子元素会压缩
  
• wrap 换行，第一行在上
  
• wrap-reverse 换行，第一行在下
  

5. flex-flow
flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap

flex-flow: flex-direction flex-wrap;

6. align-content
align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，有以下6个值

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• flex-start 副轴方向首对齐
  
• flex-end 副轴方向尾对齐
  
• center 副轴方向居中对齐
  
• space-between 第一个主轴和最后一个主轴贴边，其他主轴平分剩余空间
  
• space-around 所有主轴平分所有空间
  
• stretch （默认）若子元素没有设置高度，则铺满父元素高度
  
  

三、子元素属性
由于对父元素设置的属性是对于所有子元素来说的，要是单独的对其中的某个子元素进行操作，还需要对子元素设置对应的属性，子元素的属性有以下6种

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

1. order
order属性可以在不破坏html文档的结构前提下改变子元素的顺序。order：数字；的方式使用，数字越小越靠前，默认都为0。

.father {
            height: 40px;
            width: 40px;
            border: 1px solid #ccc;
            margin: 100px auto;
            display: flex;
        }
        .son {
            height: 10px;
            width: 10px;
        }
        .son:nth-child(1) {
            background-color: pink;
        }
        .son:nth-child(2) {
            background-color: purple;
        }
        .son:nth-child(3) {
            background-color: skyblue;
        }

使紫色盒子到最前边，只需给紫色盒子设置order：-1；

.son:nth-child(2) {
            background-color: purple;
            order: -1;
        }

2. flex-grow
flex-grow可以设置子元素的放大比例，默认为0，即有剩余空间也不放大。

.father {
            height: 40px;
            width: 40px;
            border: 1px solid #ccc;
            margin: 100px auto;
            display: flex;
        }
        .son {
            height: 10px;
            width: 10px;
        }
        .son:nth-child(1) {
            background-color: pink;
        }
        .son:nth-child(2) {
            background-color: purple;
        }
        .son:nth-child(3) {
            background-color: skyblue;
        }

若将右边的剩余空间都分配给粉色子元素，只需给粉色子元素设置flex-grow：1；

.son:nth-child(1) {
            background-color: pink;
            flex-grow: 1;
        }

若将右边的剩余空间都分配给粉色子元素1份和蓝色子元素2份

.son:nth-child(1) {
            background-color: pink;
            flex-grow: 1;
        }
        .son:nth-child(2) {
            background-color: purple;
        }
        .son:nth-child(3) {
            background-color: skyblue;
            flex-grow: 2;
        }

3. flex-shrink
flex-shrink属性是设置子元素的缩小比例，默认为1。

.father {
            height: 40px;
            width: 40px;
            border: 1px solid #ccc;
            margin: 100px auto;
            display: flex;
        }
        .son {
            height: 10px;
            width: 10px;
        }
        .son:nth-child(1) {
            background-color: pink;
        }
        .son:nth-child(2) {
            background-color: purple;
        }
        .son:nth-child(3) {
            background-color: skyblue;
        }

若元素太多超出父元素的大小，则所有元素等比例缩小

若不想让第一个粉色缩小，只需给第一个粉色设置flex-shrink: 0;剩余的其他子元素还是等比例缩放

.son:nth-child(1) {
            flex-shrink: 0;
        }

4. flex-basis
flex-basis属性是设置在分配多余空间之前，子元素提前占据的主轴空间大小。默认值为auto，即子元素本身的大小，也可以手动设置数值（多少px），这个属性一般很少用到，了解就可以。

5. flex
flex属性flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可以不写。

** 6. align-self**
align-self属性设置子元素在副轴方向上的位置，有以下6个值，默认是auto，但是用的最多的就是center。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

.father {
            height: 40px;
            width: 40px;
            border: 1px solid #ccc;
            margin: 100px auto;
            display: flex;
        }
        .son {
            height: 10px;
            width: 10px;
        }
        .son:nth-child(1) {
            background-color: pink;
        }
        .son:nth-child(2) {
            background-color: purple;
        }
        .son:nth-child(3) {
            background-color: skyblue;
        }

若让紫色盒子自己在副轴方向上居中，只需

 .son:nth-child(2) {
            background-color: purple;
            align-self: center;
        }

以上就是Flex弹性布局的属性的作用，作为页面布局的重要方式之一，他的响应性和适配性是很重要的因素，也是我们必须掌握的一种布局方式。