flex布局之容器元素属性

2022-10-14 256

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： flex布局之容器元素属性

容器元素属性

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>

网络异常，图片无法展示

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>

网络异常，图片无法展示

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>

网络异常，图片无法展示

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

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-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-grow, flex-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属性。

默认值为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>

网络异常，图片无法展示

flex布局的注意点：

如果父元素flex-wrap: nowrap，即使子元素宽度固定，最后也会被压缩成一行显示。

网络异常，图片无法展示

设置父元素display: flex和display: inline-flex的区别。他只是将父元素当场块级元素，还是内联元素。子元素不会受到影响。

如果子元素未设置高度，那么父元素align-items: stretch。子元素将被拉伸，占满父元素的高度。

网络异常，图片无法展示

flex布局之容器元素属性

容器元素属性

order

flex-grow

flex-shrink

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

flex

align-self

flex布局的注意点：

容器服务

热门文章

最新文章

相关课程

相关电子书