flex概念与实践

TomorrowLM
100 阅读4分钟
  • display: flex; 会浮动

  • flex-direction: column;决定主轴的方向(即子元素的排列方向)

    调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse

  • justify-content（水平方向）定义了子元素在主轴上的对齐方式

    主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-around(多与空间放两边)、space-between(多与空间放中间)几种方式

  • align-items（垂直方向）定义子元素在侧轴上如何对齐

    调整侧轴方向对齐方式，包括flex-start、flex-end、center、baseline、stretch

  • flex-wrap 控制是否换行，包括wrap、nowrap （不换行）

  • align-content 定义了多根轴线的对齐方式, 如果子元素只有一根轴线,该属性不起作用 可对应用flex-wrap: wrap后产生的换行进行控制，包括flex-start、flex-end、center、space-between、space-around、stretch

  • align-self 侧轴上单个项目对齐方式 单独对某一个子元素设置 flex-start、flex-end、center、baseline、stretch

flex 控制子元素伸缩比例

blog.csdn.net/qq_41635167…

www.zhangxinxu.com/wordpress/2…

 flex:1  
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0%;
 ​

在Flex布局中，一个Flex子项的宽度是由元素自身尺寸，flex-basis设置的基础尺寸，以及外部填充（flex-grow）或收缩（flex-shrink）规则3者共同决定的。

举例：分家产

  • flex-basis:用于设置子盒子宽度。在Flex布局中，flex-basis优先级是比width高的。flex-basis的默认值是auto，表示自动，也就是完全根据子列表项自身尺寸渲染。

    自身尺寸渲染优先级如下：min-width > || max-width > width > Content Size

    flex-basis就是分配固定的家产数量。

  • flex-grow(用在子盒子上)属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

    flex-grow就是家产剩余家产仍有富余的时候该如何分配。

  • flex-shrink(flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值)属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

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

    flex-shrink就是家产剩余家产不足的时候该如何分配。

flex参数

  • 1个值

    如果flex的属性值只有一个值，则：

    • 如果是数值，例如flex: 1，则这个1表示flex-grow，此时flex-shrink和flex-basis都使用默认值，分别是1和auto。更正为： 此时flex-shrink和flex-basis的值分别是1和0%，注意，这里的flex-basis的值是0%，而不是默认值auto。
    • 如果是长度值，例如flex: 100px，则这个100px显然指flex-basis，因为3个缩写CSS属性中只有flex-basis的属性值是长度值。此时flex-grow和flex-shrink都使用默认值，分别是0和1。 更正为： 此时flex-grow和flex-shrink都是1，注意，这里的flex-grow的值是1，而不是默认值0。

  • 2个值

    如果flex的属性值有两个值，则第1个值一定指flex-grow，第2个值根据值的类型不同表示不同的CSS属性，具体规则如下：

    • 如果第2个值是数值，例如flex: 1 2，则这个2表示flex-shrink，此时flex-basis使用默认值auto。 更正为： 此时flex-basis计算值是0%，并非默认值auto。
    • 如果第2个值是长度值，例如flex: 1 100px，则这个100px指flex-basis，此时flex-shrink使用默认值0。

  • 3个值

    如果flex的属性值有3个值，则这长度值表示flex-basis，其余2个数值分别表示flex-grow和flex-shrink。下面两行CSS语句的语法都是合法的，且含义也是一样的：

     /* 下面两行CSS语句含义是一样的 */
 flex: 1 2 50%；
 flex: 50% 1 2;

order 定义子元素的排列顺序, 数值越小 排列越靠前 默认为0

flex布局实现表格自适应容器

.fit-table-layout {
  display: flex;
  height: 100%;
  flex-direction: column;
  box-sizing: border-box;

  .fit-table {
    flex: 1;
    height: 0;

    .el-table {
      height: calc(100% - 56px) !important; //56px是页脚的高度
    }

    .el-table__body-wrapper {
      height: calc(100% - 56px) !important;
    }
  }
}

    <div class="detail">信息</div>
    <filter-form class="filter" :filterList="filterList" :formState.sync="formState"> 查询表单 </filter-form>
    <Table class="fit-table table" height="100%"> </Table>
  </div>
avatar
文章
阅读
粉丝