Flex布局详解，手把手教你如何使用Flex布局

在线演示

基础框架HTML为

CSS样式为

    .videos{
        height: 150px;
        width: 80%;
        background-color: rgba(0,0,0, 0.3);
        margin-top: 50px;
        display: flex; /** flex布局 **/

    }
    .videos-index{
        height: 80%;
        width: 100px;
        border-radius: 5px;
        border: 1px solid blue;
    }

实现效果为

可以看到，只是在div容器中使用display:flex布局，框内的5个div并排在容器的左上角。下面就来详细讲解flex布局的实现方法。

首先了解一下flex的基本概念：

flex布局中，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

flex布局默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的flex属性

主要有6个基本属性：

1、flex-direction

2、flex-wrap

3、flex-flow

4、justify-content

5、align-items

6、align-content

下面一一介绍。

1）flex-direction

该属性决定主轴的方向，也就是项目的排列方向。属性值有

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

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

也就是row是沿着水平方向排列，column是沿着竖直方向排列。row是默认值，所以在刚开始看到的5个div排成一行排列正是因为row这个属性值。

2）flex-wrap

默认情况下，项目都排在一条线上，水平或者竖直。flex-wrap属性定义，如果一条轴线排不下，如何换行。属性值有

nowrap（默认）：不换行。

wrap：换行，第一行在下方。也就是排满之后，在第一行的下方另起一行继续平行第一行排列。

wrap-reverse：换行，第一行在上方。也就是排满之后，在第一行的上方另起一行继续平行第一行排列。

3）flex-flow

此属性是flex-direction和flex-wrap的简写形式，默认属性值是row nowrap。

4）justify-content

justify-content是比较常用的属性，该属性定义了项目在主轴上的对齐方式。它的属性值有5个，对齐方式与轴的方向有关。

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

   flex-end：右对齐

   center： 居中

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

   space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5）align-items

align-items属性定义了项目在交叉轴上如何对齐，也是非常常用的属性，该属性可以控制元素的垂直居中。属性值有5个。

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

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

   center：交叉轴的中点对齐。

   baseline: 项目的第一行文字的基线对齐。

   stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6）align-content

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

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

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

   center：与交叉轴的中点对齐。

   space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

   space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

   stretch（默认值）：轴线占满整个交叉轴。

以上6个属性是设置在父级容器上面的。下面6个属性是设置在子元素上面的。分别为

1、order

2、flex-grow

3、flex-shrink

4、flex-basis

5、flex

6、align-self

1）order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。也就是该属性决定子元素在容器中的排序位置。

子元素的CSS设置如下

    .videos-1{
        order: 1;
    }
    .videos-2{
        order: 0;
    }
    .videos-3{
        order: 2;
    }
    .videos-4{
        order: 4;
    }
    .videos-5{
        order: 3;
    }

效果图如下

2）flex-grow

flex-grow属性定义项目的放大比例，默认为0。

设置flex-grow会将父容器的剩余空间占满。

子元素CSS设置如下

.videos-1{
        order: 1;
        flex-grow:1
    }
    .videos-2{
        order: 0;
        flex-grow:2
    }
    .videos-3{
        order: 2;
        flex-grow:1
    }
    .videos-4{
        order: 4;
        flex-grow:1
    }
    .videos-5{
        order: 3;
        flex-grow:1
    }

效果如下

3） flex-shrink

和flex-grow属性相反，flex-shrink属性是控制元素缩小比例。默认为1，即如果空间不足，该项目将缩小。

4）flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5）flex

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

6）align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。