flex布局之容器元素属性

449 阅读2分钟

容器元素属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

该属性是决定元素排列顺序的。数值越小,排列越靠前,默认为0。如果都为0,就按照代码顺序排列。

<style>
    .box {
      width: 800px;
      display: flex;
    }

    .box div {
      width: 200px;
    }

    .first {
      background: red;
      order: 4;
    }

    .second {
      background: blue;
      order: 3;
    }

    .third {
      background: yellow;
      /* order: 2; */
    }

    .four {
      background: green;
    }
    
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>

image.png

flex-grow

当容器宽度大于容器元素总宽度时,规定容器元素的放大比例。默认为0,即如果存在剩余空间,也不放大。 注意:当容器设为flex-wrap: nowrap;不换行的时候,容器宽度有不够分的情况,弹性元素会根据flex-grow来决定。 弹性容器的宽度正好等于元素宽度总和,无多余宽度,此时无论flex-grow是什么值都不会生效。

<style>
    .box {
      width: 800px;
      display: flex;
      border: 1px solid black;
    }

    .box div {
      width: 100px;
    }

    .first {
      background: red;
      /* order: 4; */
      flex-grow: 2;
    }

    .second {
      background: blue;
      /* order: 3; */
      flex-grow: 1;
    }

    .third {
      background: yellow;
      /* order: 2; */
    }

    .four {
      background: green;
    }
  </style>
  
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>

image.png

image.png

flex-shrink

定义了项目的缩小比例(容器宽度<元素总宽度时如何收缩),默认为1,即如果空间不足,该项目将缩小。默认情况下等比例收缩。如果值为0,则该元素不缩小。

  <style>
    .box {
      width: 800px;
      display: flex;
      border: 1px solid black;
    }

    .box div {
      width: 250px;
    }

    .first {
      background: red;
      /* order: 4; */
      /* flex-grow: 2; */
      flex-shrink: 0;
    }

    .second {
      background: blue;
      /* order: 3; */
      /* flex-grow: 1; */
      flex-shrink: 2;
    }

    .third {
      background: yellow;
      /* order: 2; */
    }

    .four {
      background: green;
    }
  </style>
  
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>

image.png

flex-basis(个人感觉用处不大)

设置的是元素在主轴上的初始尺寸,所谓的初始尺寸就是元素在flex-growflex-shrink生效前的尺寸,即设置flex-grow, flex-shrink后该值将失效。默认值为auto。如设置了width则元素尺寸由width/height决定(主轴方向),没有设置则由内容决定。当设置为px的数值时,他会覆盖掉元素自身的主轴方向的宽度/高度。

flex-basis: 0 和 flex-basis: auto的区别:

  • flex-basis: auto 表示项目的本来大小,当设置为 auto 时会根据主轴方向检索该 flex-item 的 width 或 height 值作为 flex-basis 的值。如果 width 或 height 值为 auto,则 flex-basis 设置为 content,也就是基于 flex 的元素的内容自动调整大小。
  • flex-basis: 0 相当于指定了宽度或高度(由主轴方向决定)为 0。

flex

flex属性是flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto

一些常用缩写表示:

-   flex: 1 = flex: 1 1 0%
-   flex: 2 = flex: 2 1 0%
-   flex: auto = flex: 1 1 auto
-   flex: none = flex: 0 0 auto,常用于固定尺寸不伸缩

align-self

允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

可以取:align-self: auto | flex-start | flex-end | center | baseline | stretch

默认值为auto,表示继承父元素的align-items属性。

  <style>
    .box {
      width: 800px;
      height: 300px;
      display: flex;
      border: 1px solid black;
      align-items: center;
    }

    .box div {
      width: 150px;
    }

    .first {
      background: red;
      align-self: auto;
    }

    .second {
      background: blue;
      align-self: stretch;
    }

    .third {
      background: yellow;
      align-self: baseline;
    }

    .four {
      background: green;
      align-self: flex-end;
    }
  </style>
  
  <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="four">4</div>
  </div>

image.png

flex布局的注意点:

  • 如果父元素flex-wrap: nowrap,即使子元素宽度固定,最后也会被压缩成一行显示。 image.png
  • 设置父元素display: flexdisplay: inline-flex的区别。他只是将父元素当场块级元素,还是内联元素。子元素不会受到影响。
  • 如果子元素未设置高度,那么父元素align-items: stretch。子元素将被拉伸,占满父元素的高度。 image.png