快速了解移动端常用布局：flex布局

本文介绍了flex布局中常用的属性

display: flex;

代码：

<section class="container">
    <style>
        .container{
            display: flex;
        }
        .box{  width: 100px;  height: 100px;  }
        .color1{  background: red;  }
        .color2{  background: blue;  }
        .color3{  background: yellow;  }
    </style>
    <div class="box color1">1</div>
    <div class="box color2">2</div>
    <div class="box color3">3</div>
</section>

效果：

这种效果类似float：left或 display：inline-block。

一.容器的属性

1.flex-direction属性

代码：

<section class="container">
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        .box{  width: 100px;  height: 100px;  }
        .color1{  background: red;  }
        .color2{  background: blue;  }
        .color3{  background: yellow;  }
    </style>
    <div class="box color1">1</div>
    <div class="box color2">2</div>
    <div class="box color3">3</div>
</section>

效果：

flex-direction属性用来设置容器内元素的排列方向，共有四个值。

flex-direction属性值	介绍
row	横向排序，正序（默认值）
row-reverse	横向排序，倒序
column	纵向排序，正序
column-reverse	纵向排序，倒序

注：若此时将demo中的flex-direction属性设置为row-reverse会出现整体元素居右对齐的效果，如下：

而将flex-direction设置为column-reverse则不会出现居下对齐，这是因为此demo中section元素的宽高的默认值为height:auto;width: 100%导致的。

2.justify-content属性

代码：

<section class="container">
    <style>
        .container{
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
        .box{  width: 100px;  height: 100px;  }
        .color1{  background: red;  }
        .color2{  background: blue;  }
        .color3{  background: yellow;  }
    </style>
    <div class="box color1">1</div>
    <div class="box color2">2</div>
    <div class="box color3">3</div>
</section>

效果：

justify-content属性决定主轴方向的对齐方式，其值如下

justify-content属性值	介绍
flex-start	以开始方向对齐
flex-end	以结束方向对齐
center	居中对齐
space-between	两端对齐
space-around	等距分布

flex-start和flex-end理解起来有点麻烦，我们不防将flex-direction属性与justify-content属性进行混合搭配一下，查看各种效果，就大概能理解了。在上面这个demo中我们可以简单的理解为1号元素在哪边，哪边便是start；3号元素在哪边，哪边便是end。此demo中由于3号元素在右边，justify-content: flex-end 则实现靠右对齐。

center的效果就不用多说，都明白。

space-between的效果如下:

space-around的效果如下：

3.align-items属性

代码：

<section class="container">
    <style>
        .container{
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row; /* 值为row,row-reverse时横向为主轴，值为column,column-reverse时纵向为主轴 */
            justify-content: space-around; /* 决定主轴 */
            align-items: center; /* 决定交叉轴 */
        }
        .box{  width: 100px;  height: 100px;  }
        .color1{  background: red;  }
        .color2{  background: blue;  }
        .color3{  background: yellow;  }
    </style>
    <div class="box color1">1</div>
    <div class="box color2">2</div>
    <div class="box color3">3</div>
</section>

效果：

 

align-items属性决定交叉轴方向的对齐方式，其值如下

align-items属性值	介绍
flex-start	以开始方向对齐
flex-end	以结束方向对齐
center	居中对齐
stretch（默认值）	拉伸交叉轴
baseline	第一行文字的基线对齐

我们如何理解主轴和交叉轴？align-items和justify-content的区别？

a.  justify-conten 决定主轴对齐方式

b.  align-item  决定交叉轴对齐方式

c.  flex-direction 值为row,row-reverse时横向为主轴，纵向为交叉轴；值为column,column-reverse时纵向为主轴，横向为交叉轴

 

当然，更严格的讲，flex-direction值为 row时主轴为从左向右的水平方向，row-reverse时主轴为从右向左的水平方向；

column时主轴为从上到下的垂直方向，column-reverse时主轴为从下到上的垂直方向。（这个不重要，了解即可...）

有关这点的知识，建议多尝试，多写代码看看效果就明白了。

我们再看stretch的效果，关键代码：

<section class="container">
    <style>
        .container{
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row; /* 值为row,row-reverse时横向为主轴，值为column,column-reverse时纵向为主轴 */
            justify-content: space-around; /* 决定主轴 */
            align-items: stretch; /* 决定交叉轴 */
        }
        .box{  width: 100px; /*height: 100px;*/  }
        .color1{  background: red;  }
        .color2{  background: blue;  }
        .color3{  background: yellow;  }
    </style>
    <div class="box color1">1</div>
    <div class="box color2">2</div>
    <div class="box color3">3</div>
</section>

效果：

 

此时，我们将子元素的高度注释掉，设置align-items: stretch 出现了纵向拉伸。同理，我们也可以实现横向拉伸。

再来看看baseline

代码：

<section class="container">
    <style>
        .container{
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row; /* 值为row,row-reverse时横向为主轴，值为column,column-reverse时纵向为主轴 */
            justify-content: space-around; /* 决定主轴 */
            align-items: baseline; /* 决定交叉轴 */
        }
        .box{  width: 100px; height: 100px;  }
        .color1{  background: red; font-size: 14px  }
        .color2{  background: blue; font-size: 20px }
        .color3{  background: yellow; font-size: 24px }
    </style>
    <div class="box color1">1</div>
    <div class="box color2">2</div>
    <div class="box color3">3</div>
</section>

效果：

可以看到，子元素基于文字的底部对齐了。这里要注意的是，baseline是基于第一个元素的底部对齐的。

4.flex-wrap属性

代码：

<section class="container">
    <style>
        .container{
            height: 400px;
            background: #ccc;
            display: flex;
            flex-direction: row; /* 值为row,row-reverse时横向为主轴，值为column,column-reverse时纵向为主轴 */
            justify-content: center; /* 决定主轴 */
            align-items: flex-start; /* 决定交叉轴 */
            flex-wrap: wrap;
        }
        .box{  width: 150px; height: 100px;  }
        .color1{  background: red; font-size: 14px  }
        .color2{  background: blue; font-size: 20px }
        .color3{  background: yellow; font-size: 24px }
    </style>
    <div class="box color1">1</div>
    <div class="box color2">2</div>
    <div class="box color3">3</div>
</section>

效果：

flex-wrap属性的值如下

flex-wrap属性值	介绍
nowrap	不换行
wrap	换行
wrap-reverse	换行，第一行在下方

这个例子中，如果要消除第一行和第二行之间的间距，将父容器的高度缩小即可。

nowrap的效果：

wrap-reverse的效果：

 

5.flex-flow属性

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

6.align-content属性

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

属性值	介绍
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）	轴线占满整个交叉轴

二.容器中项目的属性

• order，定义项目的排列顺序。数值越小，排列越靠前，默认为0；
• flex-grow，定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
• flex-shrink，定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。为0则不缩小；
• flex-basis，定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
• flex，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。快捷值：auto (1 1 auto) 和 none (0 0 auto) 。常用值 1（1，1，0%）【1在IE下有兼容问题，其值为（1，1，0px）】；
• align-self，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

这里就不再详细介绍了，我找到两篇阮一峰老师的相关博文，大家可以去看一下

Flex 布局教程：语法篇

Flex 布局教程：实例篇