Flex布局

作者: 子却 | 来源:发表于2018-10-28 20:41 被阅读0次

一、Flex布局与传统布局

传统布局依赖于盒模型，利用display、position、float属性来布局，但是其对于某些特殊布局，如垂直居中，就很不方便。这种情况下利用Flex布局就很方便。
注：设置了 Flex 布局以后，其子元素的float、clear和vertical-align属性将失效。

二、Flex布局的基本概念

轴.png

1、Flex布局

即“弹性布局”，是用来为盒模型提供最大的灵活性。

2、flex容器

指设置flex布局的元素：

.box{
    display:flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀:

.box{
    display: -webkit-flex;
    display:flex;
}

3、flex项目

指flex容器的所有子元素。

4、主轴与交叉轴

主轴（main axis）：flex容器的水平轴；
交叉轴（cross axis）：flex容器的垂直轴；
main start、main end：主轴的开始与结束位置，主轴与边框的交叉点；
cross start、cross end：交叉轴的开始与结束位置，交叉轴与边框的交叉点；
main size：单个项目占据的主轴空间；
cross size：单个项目占据的交叉轴空间。

三、Flex布局的属性

Flex布局的属性有两种：设置在容器上的属性和设置在项目上的属性。

容器的属性

容器的属性有6种：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。这些属性均设置在容器上。
注：各属性解析均建立在以下代码基础上：

<style>
        #flex{
            display: flex;
        }
        #flex1{
            background-color: aquamarine;
            width: 100px;
            height: 100px;
        }
        
        #flex2{
            background-color: rgb(127, 136, 255);
            width: 100px;
            height: 100px;
        }
        #flex3{
            background-color: rgb(255, 127, 180);
            width: 100px;
            height: 100px;
        }
</style>
    
<div id="flex">
    <div id="flex1">flex1</div>
    <div id="flex2">flex2</div>
    <div id="flex3">flex3</div>
</div>

flex-direction属性：

flex-direction有4个属性值：row（默认）、row-reverse、column、column-reverse；用于决定主轴的方向（即项目的排列方向）。

flex-direction: row ;

row.png

flex-direction: row-reverse ;

row-reverse.png

flex-direction: column ;

colum.png

flex-direction: column-reverse ;

column-reverse.png

flex-wrap属性：

flex-wrap有三个属性值： nowrap（默认）、wrap、wrap-reverse；用于规定一条轴线排不下时，如何换行。

flex-wrap：nowrap；不换行

nowrap.png

flex-wrap：wrap；换行，第一行在上方。

wrap.jpg

flex-wrap：wrap-reverse；换行，第一行在下方。

wrap-reverse.jpg

flex-flow属性

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

justify-content属性

justify-content属性有5个属性值：flex-start （默认）、flex-end 、center 、space-between 、space-around；用于定义项目在主轴上的对齐方式。

justify-content：flex-start ；左对齐

flex-start.png

justify-content：flex-end ；右对齐

flex-end.png

justify-content：center ；居中

center.png

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

space-between.png

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

space-around.png

align-items属性

align-items属性有5个属性值：flex-start 、flex-end 、center 、baseline 、stretch；用于定义项目在交叉轴上如何对齐。
注：设置align-items属性时，要求容器有高度。

<style>
        *{
            <!--将h1的外边距取消，否则会影响 flex-start 与 flex-end的效果-->
            margin:0；
        }
        #flex{
            height: 500px；<!--为容器设置高度-->
            display: flex;
        }
        #flex1{
            background-color: aquamarine;
            width: 100px;
            height: 100px;
        }
        
        #flex2{
            background-color: rgb(127, 136, 255);
            width: 100px;
            height: 100px;
        }
        #flex3{
            background-color: rgb(255, 127, 180);
            width: 100px;
            height: 100px;
        }
</style>
    
<div id="flex">
    <div id="flex1">flex1</div>
    <h1 id="flex2">flex2</h1>
    <div id="flex3">flex3</div>
</div>

align-items：flex-start；各项目于交叉轴的起点对齐

flex-start.png

align-items：flex-end；各项目于交叉轴的终点对齐

flex-end.png

align-items：center；各项目于交叉轴的中点对齐

center.png

align-items：baseline；各项目的第一行文字的基线对齐

baseline.png

align-items：stretch；如果项目未设置高度或设为auto，将占满整个容器的高度

为项目设置高度的情况下：

stretch-有高度.png

项目没有高度：

<style>
    *{
        margin: 0;
    }
        #flex{
            height:300px ;
            display: flex;
            align-items: stretch;
        }
        #flex1{
            background-color: aquamarine;
        }
        
        #flex2{
            background-color: rgb(127, 136, 255);
        }
        #flex3{
            background-color: rgb(255, 127, 180);
        }
</style>
    
<div id="flex">
    <div id="flex1">flex1</div>
    <h1 id="flex2">flex2</h1>
    <div id="flex3">flex3</div>
</div>

stretch-无高度.png

align-content属性

align-content属性有6个属性值：flex-start 、flex-end 、center、space-between 、space-around 、stretch（默认）；用于定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex{
            width: 240px;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
            background-color: #8c8c8c;
        }
    .flex div{
            border: 2px solid #8c8c8c;
            width: 50px;
            height: 50px;
            background-color: #a0c8ff;
        }
</style>
    
<div class="flex">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

align-content：flex-start；与交叉轴的起点对齐

flex-start.png

align-content：flex-end；与交叉轴的终点对齐

flex-end.png

align-content：center；与交叉轴的中点对齐

center.png

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

space-between.png

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

space-around.png

align-content：stretch；轴线占满整个交叉轴

stretch.png

项目的属性

项目的属性有6种：order、flex-grow、flex-shrink、flex-basis、flex、align-self。

order属性

用于定义项目的排列顺序。数值越小，排列越靠前，默认为0。

下例中，原本位于第一二三位的方块，在更改了其order数值后，现位于最后三位。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex{
            width: 240px;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            background-color: #8c8c8c;
        }
    .flex div{
            border: 2px solid #8c8c8c;
            width: 50px;
            height: 50px;
            background-color: #a0c8ff;
        }
    #f3,#f2{
            order: 1;
        }
    #f1{
            order: 5;
        }
</style>
    
<div class="flex">
    <div id="f1">1</div>
    <div id="f2">2</div>
    <div id="f3">3</div>
    <div id="f4">4</div>
    <div id="f5">5</div>
    <div id="f6">6</div>
</div>

order.png

flex-grow属性

用于定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

下例中，为f1和f5设置同样的数值，由于其各自所在的主轴剩余的空间不等，因此最终的放大效果不等。所以flex-grow属性是一种瓜分项目所在主轴（即使剩余空间不足以支撑项目扩张相应倍数，也不会扩张到另外的主轴上）的剩余空间的属性。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .flex{
            width: 240px;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            background-color: #8c8c8c;
        }
    .flex div{
            border: 2px solid #8c8c8c;
            width: 50px;
            height: 50px;
            background-color: #a0c8ff;
        }
    #f1,#f5{
            flex-grow: 5;
        }
    #f3{
            flex-grow: 2;
        }
</style>
    
<div class="flex">
    <div id="f1">1</div>
    <div id="f2">2</div>
    <div id="f3">3</div>
    <div id="f4">4</div>
    <div id="f5">5</div>
    <div id="f6">6</div>
</div>

flex-grow.png

flex-shrink属性

用于定义项目的缩小比例，默认为1。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小；
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性

用于定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性

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

align-self属性

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

参考：Flex 布局教程：语法篇