对 flex 布局属性的简单探索

对 flex 布局属性的简单探索

资料:

其中大部分内容应用自 阮一峰 flex 教程

MDN flex 布局

容器的属性

  • 当容器定义 display: flex ,子元素无 flex 属性时,多个子元素自动铺满容器,子元素有固定宽度也无济于事,不定义 flex-wrap 时 1555159974715

  • 项目在轴线的对齐方式,容易对比记忆

    • justify-content 项目在主轴上的对齐方式
    • align-items 项目在交叉轴的对齐方式
  • align-items

    • align-items: baseline 项目的第一行文字的基线对齐

    1555162526124

    可以看到 1 的字体大,在文字最下边的一条线就是这一行项目的对齐方式

    • align-items: stretch 如果项目未设置高度或设为 auto,将占满整个容器的高度

1555162844964

​ 子项目中只设置了宽度,没有设置高度,子项目就会自动伸长占满容器

  • align-content

    如果项目只有一根轴线,该属性不起作用 flex-wrap: nowrap MDN : 设置了浏览器如何沿着横轴在内容项之间和周围分配空间 阮一峰:定义了多根主轴线的对齐方式。

    这两个解释如果互补一下,决定了多根项目主轴线沿交叉轴的方向和项目之间的空间布局

    • align-content: stretch

      1555165511561

      内容项目的主轴紧挨交叉轴方向走,但项目之间的距离相等均匀

    • align-content: space-evenly

      1555165774574

      内容项目之间,并且项目与交叉轴顶部或底部的距离都相等

项目的属性

  • flex-grow

    MDN:定义弹性盒子项的拉伸因子

    阮一峰:属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大

    • 子项目的 flex-grow 的属性之间的比例是否等于子项目宽度之间正比

    1555241688820

    设置 container 的 width: 100%

    item 1 的 flex-grow: 2 ,item2 的是 3, item3 的是 4,比例为 2 : 3 : 4

    通过 Chrome 测量的实际 width ,container: 1009.2 px (border 也算)

    item1: 241.15px;item2:335.74px;item3: 430.31px

    而实际的比例大概是 0.24 : 0.33 : 0.42 ,确实近似于 2 : 3 : 4,所以子项目的 flex-grow 的属性之间的比例等于子项目宽度之间的比例

    • 当子项目中只有一个拥有 flex-grow 属性,就会占据 container 减去剩余其它子项目的剩余空间

      1555242402728

    • 当所有子项目拥有一样数值的 flex-grow 属性,子项目将等分剩余空间

      1555242585651

  • flex-shrink

    MDN:指定了 flex 元素的收缩规律。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值

    阮一峰:定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小

    • 当所有子项目的 flex-shirink 属性都是 1,其中一个项目为 0,当容器缩小空间不足时,为 0 的不缩小。

      1555243752237

    • 当所有子项目的 flex-shirink 属性都是 0,当容器缩小空间不足时,所有子项目都不缩小

      1555243858116

  • flex-basis

    MDN:指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒的宽或者高的尺寸大小

    阮一峰:定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即项目的本来大小。

    • 如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒的宽或者高的尺寸大小

      • item 不使用 box-sizing

      1555245252332

      item 设置的 flex-basis 为 120px,内容盒的宽度就为 120px

      1555245349961

      • item 使用 box-sizing

        1555245406708

        item 设置的 flex-basis 为 120px, 内容盒的宽度为 118px,减去了 border 的两边长度各为 1px

        1555245518083

    • 当 display: flex 容器下的子项目同时拥有 width 和 flex-basis 属性时,只有 flex-basis 会生效

      1555245913002

    • flex-basis 属性的值只会在容器主轴剩余范围中起作用

      1555246178061

      子项目 flex-basis 之和已经大于容器的 400px,但这只是指明了在主轴上所用的空间大小,而不是项目具体的宽度 width ,这就引来了另一个重要的问题:**flex-basis 与 width 之间有什么区别?**后面单独写一篇文章探讨。

  • flex 属性

    flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
    
  • align-self 属性

    • 子项目决定了自己在交叉轴上的具体位置

      1555247883811

    上述例子,container 的 align-items: flex-end

最近的文章

数组 - 找出重复项

从数组中找出重复项DescriptionGivenanarrayofintegers,findift…

继续阅读
更早的文章

基本 LInux 命令

基本LInux命令用户操作passwd修改密码passwduseradd添加用户文件catcat-n…

继续阅读