flex布局

 

 

 

1 什么是flex¶

FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。为什么我们要使用flex呢？有两点原因：

• 目前我们所使用的布局大多都是使用div盒装模型进行布局，而任何一个div都可以指定为flex布局，故而flex可以为盒装模型提供最大的灵活性。

• flex布局更加符合响应式设计的特点。

 

2 主轴方向与换行¶

在使用flex前，有必要认识flex容器的主轴（main axis)和交叉轴(cross axis)。主轴与交叉轴是以子元素的排列方向最为区分依据的：当容器子元素水平排列时，X轴称为主轴，Y轴称为交叉轴；当容器子元素垂直排列时，Y轴称为主轴，X轴称为交叉轴。主轴起点称为main start，终点称为main end；交叉轴起点称为cross start，交叉轴终点称为cross end。子元素占主轴的长度称为main size，占交叉轴长度称为cross size。

 

 

2.1 flex-direction¶

子元素在父元素盒子中的排列方向，包含一下参数：

 

 

注意，在使用flex-direction设置排列方向后，在默认情况下，如果子元素总长大于容器总长，子元素总长将被平均压缩，例如：父元素设置为300px，4个子元素长度各位100px，设置flex-direction值为row后，4个子元素总长将被压缩为300px，每个元素皆为75px。如果要控制不对子元素进行压缩，需要通过下方flex-wrap进行设置进行换行显示。

 

2.2 flex-wrap¶

子元素在父元素盒子中是否换行（列）。包含一下参数：

 

 

设置flex-direction值为row，然后设置flex-wrap值为wrap，此时，如果子元素总长超出容器长度，那么，子元素超出部分将会换行显示。可以看出，flex-direction和flex-wrap两设置项经常组合出现，所以，在flex中提供flex-flow用以简写这两项。

2.3 flex-flow¶

flex-direction和flex-wrap的简写形式。
书写形式："flex-flow: flex-direction的值 flex-wrap的值"
例如，flex-flow:row wrap; 与flex-direction:row;flex-wrap:wrap;组合等同。

 

3 剩余空间使用-主轴对齐方式¶

如果子元素总长不足以占满主轴空间时，就会有剩余空间。剩余空间如何使用呢？可以通过justify-content来进行设置。

• justify-content

取值项如下：

 

 

4 交叉轴对其方式¶

 

• align-items

设置每个flex元素在交叉轴上的默认对齐方式。

 

 

与align-items很相似的有一个属性align-content，区别在于，align-items将每一行/列当做一个独立整体进行排列，而align-conten把所有元素当做一个整体在交叉轴上进行排列。

• align-content

 

 

5 给子元素设置伸缩比例¶

 

5.1 flex-basis¶

设置子元素弹性盒伸缩基准值。如下所示，父元素设置了flex布局，宽度为500px，在两个子元素盒子中，可以通过flex-basis设置基准值各占50%，也就是150px。在这里，X轴即是主轴，基准值与宽度等同。

#div-container{
    display: flex;
    width: 500px;
}

#div-child1{
    flex-basis: 30%;
}
#div-child2{
    flex-basis: 30%;
}

 

5.2 flex-grow¶

设置弹性盒子的扩展比率。在5.1节例子中，两个子元素div盒子各占30%，那就还有40%的剩余空间，如何处理呢？flex-grow可以这个剩余空间的使用。
flex-grow的值可以设置为整数，表示所占份数。如下所示，第一个子元素div盒子flex-grow都设置为1，第二个设置为4，表示共分成,5份，各占其中1份，第一个div可以扩展剩余空间的五分之一，所以第一个div最终款读书为30%500+（1-60%）50020%=190px；同理，第二个子元素div为30%500+（1-60%）50080%=310px。

#div-container{
    display: flex;
    width: 500px;
}

#div-child1{
    flex-basis: 30%;
    flex-grow: 1;
}
#div-child2{
    flex-basis: 30%;
    flex-grow: 4;
}

 

5.3 flex-shrink¶

设置弹性盒子的缩小比率。如果子元素总宽度大于容器宽度，这时候就显示不下了，那么就需要设置缩小比率。上文说到过，如果子元素总长大于容器总长，子元素总长将被平均压缩，这是flex布局的默认设置。我们可以设置flex-shrink值为0，那么，子元素将可以超出父容器。
在多数情况下，我们还是不允许超出的，那么，就需要对子元素进行缩放。如下所示，父容器宽度为400px，两个子元素di宽度都为300px，那就将超出200px的空间，这200px肯定要通过缩放两个子元素div来节省空间，可以通过flex-shrink来设置。我们设置第一个div的flex-shrink值为1，第二个div的flex-shrink值为3，这即是说，超出的200px中，第一个div要缩放超出的200px的四分之一，也就是50px，所以第一个子元素div最终宽度为300-50=250px；第二个div要缩放四分之三，也即是150px，所以第二个地元素div宽度变为300-150=150px。

#div-container{
    display: flex;
    width: 400px;
}

#div-child1{
    flex-basis: 300;
    flex-grow: 1;
    flex-shrink: 1;
}
#div-child2{
    flex-basis: 300;
    flex-grow: 1;
    flex-shrink: 3;
}

 

5.4 flex¶

flex-grow、flex-shrink、flex-basis的缩写。例如, “flex: 1 2 3;”表示flex-grow值为1，flex-shrink值为2，flex-basis值为3。