弹性布局 display

弹性盒 display:flex

此属性可以将盒子变为弹性盒，可以对盒子里的子元素进行各种排列。

盒子里分主轴和侧轴两个方向，主轴默认水平方向，侧轴默认垂直方向。

弹性布局在pc端兼容性较差且多用于移动端页面中，所以我们以下实例将模拟移动端实现。

<!--html-->
<div class="box">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

/*css*/
    .box{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    .a{
      width: 100px;
      background: red;
    }
    .b{
      width: 100px;
      background: yellow;
    }
    .c{
      width: 100px;
      background: blue;
    }

效果图

图1 - 默认效果下的弹性盒

justify-content属性

这个属性作用在父盒子中，控制主轴方向上元素的对齐方式，主要有以下几个属性：

默认值flex-start： 子元素按主轴起始位置对齐

如图1，默认从左到右排列

flex-end： 子元素按主轴结束位置对齐

/*css*/
    .box{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      justify-content: flex-end;
    }

图2 - justify-content: flex-end

space-between： 子元素按两端对齐且中间等距

/*css*/
      justify-content: space-between;
    }

图3 - justify-content: space-between

space-around： 子元素在同一行排列，两端元素距离父盒子的距离为各元素间距的一半，中间元素间距相等

/*css*/
      justify-content: space-around;

图4 - justify-content: space-around

center： 子元素居中对齐

      justify-content: center;

图5 - justify-content: center

flew-warp属性

默认值nowarp： 不换行

继续添加三个盒子，宽度相同，背景颜色不同

    .d{
      width: 100px;
      background: firebrick;
    }
    .e{
      width: 100px;
      background: blueviolet;
    }
    .f{
      width: 100px;
      background: orangered;
    }

图6 - flew-warp：nowarp

warp： 换行

    /*css*/
    .box{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      flex-wrap: wrap;
    }

图7 - flex-wrap: wrap

align-items属性

这个元素也作用在父盒子中，控制侧轴上元素的对齐方式，以下盒子高设为50px，主要有以下几个属性：

默认值 stretch： 子元素不设置高度或者为auto时可生效，子元素的高度将被拉伸，与父元素同等高

如图1

flex-start： 子元素按侧轴起始位置对齐

.box{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      align-items: flex-start;
    }

图8 - align-items: flex-start

flex-end： 子元素按侧轴结束位置对齐

.box{
      align-items: flex-end;
    }

图9 - align-items: flex-end

center： 子元素集中对齐

      align-items: center;

图10 - align-items: center

baseline： 子元素按基线对齐

如图8，这个属性不常用

align-content属性

这个元素同样作用在父盒子中，控制侧轴上多行元素的对齐方式，主要有以下几个属性：

默认值 stretch： 子元素拉伸填满父元素

.box{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      flex-wrap: wrap;
      align-content: stretch
    }

图11 - align-content: stretch

flex-start： 子元素

align-content: flex-start;

图12 - align-content: flex-start

flex-end： 子元素

align-content: flex-end;

图13 - align-content: flex-end

space-between： 子元素

align-content: space-between;

图14 - align-content: space-between

space-around： 子元素

align-content: space-around;

图15 - align-content: space-around

flex属性

这个元素终于超脱出来，是作用于子元素上的

第一种：flex:1

如图6，子元素宽度平分父元素，高度不设置则按默认来，flex等于子元素占的份数

第二种：部分子元素flex：1，剩余的宽度固定

.a{
      width: 100px;
      background: red;
      flex: 1;
    }
    .b{
      width: 100px;
      background: yellow;
    }

图16 - flex: 1

flex-direction属性

默认值row

如上图所示，均为默认值

row-reverse 水平方向反转，从右到左

    /*css*/
    .box{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      flex-direction: row-reverse;
    }

图17 - flex-direction: row-reverse

column

将主轴改为垂直方向

flex-direction: column;

图18 - flex-direction: column

column-reverse

将主轴改为垂直方向并反转

flex-direction: column-reverse;

图18 - flex-direction: column-reverse

弹性盒与浮动元素的区别

1.弹性盒的子元素不用考虑显性模式

  /*css*/
    .box{
      display: flex;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    .a{
      background: red;
      flex: 1;
    }
    .box a{
      background: yellow;
      flex: 1;
    }
    .box input{
      background: blue;
      flex: 1;
    }

图19 - 第一个区别

2.高度不会塌陷,弹性盒没设置高度也不会塌陷

   /*css*/
    .box{
      display: flex;
      width: 400px;
      border: 1px solid black;
    }

图20 - 第二个区别

3.子元素设置宽度时，会被flex:1覆盖，优先级更高,可自行测试