flex弹性布局使用

flex弹性布局

1.什么是flex布局

Flexible Box，弹性布局，是2009年W3C提出的新的一种布局方案，可以简便、完整、响应式地实现各种页面布局。

2.flex布局相关属性

弹性盒子，必须配合父元素display: flex使用，父元素称为容器，子元素则称为项目。

 

3.项目（子元素）上的六个属性

（1）flex-grow：放大比例，根据所设置的比例分配盒子所剩余的空间，默认值为0

    .wrap{
        height: 400px;
        width: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        display: flex;
    }
    .left{
        height: 100px;
        width: 100px;
        background:antiquewhite;
        flex-grow: 0;
    }
    .mid{
        height: 100px;
        width: 100px;
        background: darksalmon;
        flex-grow: 1;
    }
    .right{
        height: 100px;
        width: 100px;
        background: thistle;
        flex-grow: 1;
    }

未设置flex-grow，默认0:0:0

给子元素设置flex-grow属性，0:1:1

（2）flex-shrink：缩小比例，根据所设置的比例砍掉多出盒子部分，默认值为1（即超出部分按1:1：...砍掉）

  .wrap{
        height: 400px;
        width: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        display: flex;
    }
    .left{
        height: 100px;
        width: 200px;
        background:antiquewhite;
       flex-shrink: 0;
    }
    .mid{
        height: 100px;
        width: 200px;
        background: darksalmon;
        flex-shrink: 1
    }
    .right{
        height: 100px;
        width: 200px;
        background: thistle;
        flex-shrink: 1;
    }

未设置flex-shrink，默认1:1:1

为子元素设置flex-shrink属性，0:1:1

（3）flex-basis：伸缩基准值，表示项目占主轴的空间，该元素可以设置元素的宽度或高度，如果主轴是x轴，当同时设置width和flex-basis，width会被flex-basis覆盖

    .left{
        height: 100px;
        width: 100px;
        background:antiquewhite;
        flex-basis: 300px;
    }

设置第一个子元素flex-basis为300px，覆盖掉width

（4）flex：是flex-grow，flex-shrink和flex-basic的缩写，如flex:3 ->flex: 3 1 0%

（5）order：排列顺序，定义项目的排列顺序。数值越小，排列越靠前，默认为0

    .wrap{
        height: 400px;
        width: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        display: flex;
    }
    .left{
        height: 100px;
        width: 100px;
        background:antiquewhite;
        order: 1;
    }
    .mid{
        height: 100px;
        width: 100px;
        background: darksalmon;
        order: 2;
    }
    .right{
        height: 100px;
        width: 100px;
        background: thistle;
        order: -1;
    }

子元素设置order属性，进行其排列

（6）align-self：单个项目（子元素）相对于侧轴的对齐方式，允许单个项目与其他项目具有不一样的对齐方式，可以覆盖父元素的algin-items属性，默认为auto，也可继承父元素的align-items属性，值可为auto/flex-start/flex-end/center/baseline/stretch

假设侧轴从上至下，则

align-self:flex-start

align-self:flex-end

4

align-self:center

4.容器（父元素）上的六个属性

（1）flex-direction：设置主轴的方向

• row：主轴为水平方向，起点为左端    →
• row-reverse：主轴为水平方向，起点为右端   ←
• column：主轴为垂直方向，起点在上沿   ↓
• column-reverse：主轴为垂直方向，起点在下沿  ↑

默认，flex-direction值为row

flex-direction为column

（2）flex-wrap：设置子元素是否换行，默认情况下，项目排列在一条线（轴线）上，flex-wrap属性定义，当一条轴向排不下所有子元素时，如何换行。注意，当设置该属性后，子元素的flex-shrink失效

• nowrap：默认，不换行，超出盒子部分会按照子元素的flex-shrink属性设置的比例砍掉
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

默认nowrap

wrap

wrap-reverse

（3）flex-flow：flex-direction和flex-wrap的缩写

（4）justify-content：设置项目在主轴上的对齐方式，可取5个值flex-start/flex-end/center/space-between/space-around，具体的对齐方式和主轴的方向有关

假设flex-direction: row，主轴从左到右时：

• flex-start：左对齐

• flex-end：右对齐

• center：居中

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

• space-around：每个项目两端的间隔相等

（5）align-items：设置项目在侧轴上的对齐方式，可取5个值flex-start/flex-end/center/baseline/stretch，具体的对齐方式与侧轴相关

假设侧轴从上至下

• flex-start：上（起点）对齐

• flex-end：下（终点）对齐

• center：中点对齐

• baseline：项目的第一行文字的基准线对齐

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

（6）align-content：多根轴线的对其方式，可取6个值flex-start/flex-end/center/space-between/space-around/stretch(默认),

具体的对齐方式与侧轴相关

假设侧轴从上至下

• flex-start：与侧轴的起点对齐

• flex-end：与侧轴的终点对齐

• center：与侧轴的中点对齐

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

• space-around；没跟轴线两侧的间隔都相等，所以轴线之间的间隔，比轴线与边框的间隔大一倍

• stretch(默认)：轴线占满整个侧轴