CSS之Flex详解

  • CSS之Flex详解已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

根据规范中的描述可知道,Flexbox 模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

flex是什么

根据规范中的描述可知道,Flexbox 模块提供了一个有效的布局方式,即使不知道视窗大小或者未知元素情况之下都可以智能的,灵活的调整和分配元素和空间两者之关的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

flex分为两个部分,即容器(Container)和项目(item)。一旦将一个元素设置为 flex container,那么其子元素默认全部变为flex item。然后我们就可以通过在 container 设置一些属性来控制其 item 的布局。当然,item 自身也有一些 flex 属性,是只针对自己的属性。

要将一个元素设置为容器,只要在其 css 里添加 display:flex 或者 display:flex-inline 即可

在介绍 flex 的属性前,还有一些基本概念需要介绍,这里就借用网上的一幅图来说明
CSS之Flex详解

如图,其实已经很清晰明了了,容器内有两条轴,分别叫主轴(main axis)和交叉轴(cross axis),一般情况下 item 沿主轴方向排列,flex默认主轴为横向,交叉轴为纵向。还有 main start、main end、cross start、cross end 这四个分别表示主轴和交叉轴的起始位置和结束位置。

容器的属性

容器有六个属性,flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

  1. flex-direction
    flex-direction 有四个值:row、column、row-reverse、column-reverse。这个属性用于设置主轴方向。row 为默认值,表示主轴为横轴,方向从左到右;column 表示主轴为纵轴,方向从上到下;后两个分别表示从右到左和从下到上的主轴。
  2. flex-wrap
    flex-wrap 有三个值:nowrap、wrap、wrap-reverse。这个属性设置如何换行。nowrap(默认)表示不换行,此时若主轴方向item总长度超过容器长度,则压缩 item 主轴方向长度。wrap 表示换行,当 item 总长度超过容器长度时就换行。wrap-reverse 表示反向换行,换行后最靠近 cross end 的为第一行、然后是第二行......
  3. flex-flow
    flex-flow 为前面两个的简写版本,即可以同时在此属性里设置前面两个属性的值,如:flex-flow: nowrap row;
  4. justify-content
    justify-content 有五个值:flex-start、flex-end、center、space-between、space-around。此属性用于调整主轴方向上 item 的对齐方式。flex-start 和 flex-end 分别表示向 main start 和 main end 对齐;center 为主轴方向上的居中对齐;space-between 表示同时向 main start 和 main end 对齐,即两端对齐,并且两个 item 之间主轴方向上的间距相等;space-around 表示每个项目两侧之间的距离相等
  5. align-items
    align-items 有五个值:flex-start、flex-end、center、stretch、baseline。此属性用于调整交叉轴方向上项目的对齐方式。前面三个值和 justify-content 对应的值效果是一样的,只是方向换成了交叉轴。stretch 为默认值,当 item 交叉轴方向的长度没有设置或为auto时就会在交叉轴方向填满容器。baseline 则表示文字对齐,即以 item 中的第一行文字为基准对齐
  6. align-content
    align-content 有六个值:flex-start、flex-end、center、space-around、space-between、stretch。此属性定义了多根轴线的对齐方式,当只有一根轴线时此属性无效。此属性主要针对交叉轴方向,其值在上面都有提到,这里就不赘述了

item 的属性

item 有六个属性:order、flex-grow、flex-shrink、flex-basis、flex、align-self

  1. order。order 设置同一容器里沿主轴方向的排列顺序。可以利用此属性做交换的动画
  2. flex-grow。此属性设置该 item 在主轴方向有剩余空间时的放大比例,默认为0,即不放大。注意:这里的放大计算原理是先计算主轴上的剩余空间 rest_space,然后计算这条轴上所有 item 的 flex-grow 之和 grow_sum,最后给每个项目 item[i] 的主轴长度增加 rest_space * ( grow[i] / grow_sum )。即先计算出该 item 放大比例占所有 item 放大比例的百分比,然后该 item 增加 该百分比乘以主轴剩余长度。需要注意的是,当主轴方向没有剩余空间时,该属性无效
  3. flex-shrink。此属性和 flex-grow 正好相反,此属性设置该 item 在主轴方向没有剩余空间时的缩小比例,默认值为1,即空间不足时缩小。如果设置为0,则空间不足时会超出容器。我原本以为计算原理和 flex-grow基本相同,后来发现有一点不对。经过网上查询资料发现,flex- shrink 的计算公式略有区别。flex-shrink 首先要计算权重 TW = E(basis[i] * shrink[i])。也就是所有 item 的 basis * shrink 之和。然后每个 item 的实际长度为 basis[i] - [ (basis[i] * shrink[i] ) / TW ] * need_space。其中,basis 为项目设置长度(见下面的4),shrink 为缩放值,need_space 为需要所有 item 减少的总长度。需要注意的是:flex-shrink 为0的 item 是不会缩放的,通常这会导致 item 超出容器。
  4. flex-basis。此属性指示在分配多余空间前 item 占的长度,默认情况下为 auto,即设置的width。需要注意的是,如果没有多余空间的话,会按照上面第3条的规则缩放;是否有多余空间是根据主轴上所有 item 的flex-basis 之和来计算的,不是按照 width 来计算的!
  5. flex。此属性为 flex-grow、flex-shrink、flex-basis 三个属性的简写,有两个快捷值:auto( 1 1 auto) 和 none( 0 0 auto )。
  6. align-self。此属性可取六个值:flex-start、flex-end、center、baseline、stretch、auto。此属性设置单独的排列行为。此属性的值的含义前面容器属性部分都有提到,此处不赘述。

一些疑惑和解答

在学习flex的时候,不自觉产生了一些使用方面的疑惑,下面就是我的一些疑惑和结果

  1. justify-content 是针对主轴方向的排列,一开始想当然认为是多个 item 的情况,后面突然想起,如果是一个 item 的话,其排序规则又是怎样的呢?
    首先 flex-start、flex-end 和 center 还比较好理解,只有一个项目的时候会贴着 main start、main end 或者在 main start 和 main end 的中间。那么其值为 space-between 和 space-around的时候呢。前者表示两端对齐,后者表示等间距对齐,在只有一个项目的情况下会怎么出现什么结果呢?结果如下
    CSS之Flex详解 CSS之Flex详解
    左边表示 space-around 的结果,右边表示 space-between 的结果。可以看出,由于 space-around 要求项目两侧的距离相等,因此只有一个项目时左右距离各占一半,和center的效果是一致的;而 space-between在只有一个项目不能同时对齐左右端的情况下,选择了左对齐。
    结论:当只有一个项目时,space-around 的效果等同于 center,space-between 的效果等同于 flex-start
  2. align-items值为 stretch 时,假如 item 在交叉轴方向的长度没有设置,并且在交叉轴方向不止一个 item (即在主轴方向有换行),这时会出现什么结果呢?
    这个问题的结果非常有趣,我原以为只要交叉轴方向上只有一个 item 的会直接填满整个容器,而有两个 item 的就平分容器。然后结果却如下图
    CSS之Flex详解
    原因大概是因为 stretch 的拉伸针对的是整个轴,而上图是双轴线,实际上 stretch 的效果是正确的
    结论:只要交叉轴方向有大于2个 item,即使交叉轴方向只有一个 item,这个 item 依然不会充满容器,而是和主轴方向上的 item 长度一致
  3. align-items值为 baseline 时,若 item 没有文字会出现什么结果?
    这个问题的结果也很有趣,直接上结果
    CSS之Flex详解 CSS之Flex详解 CSS之Flex详解
    可以看出,没有文字的 item 可以认为是文字在最底部的 item
    结论:没有文字的 item 可以认为是文字在最底部的 item
  4. align-content 说明为单轴线时无效,那么什么时候为单轴线,什么时候为多轴线?
    经过我的实验,所谓的单轴线应该就是说没有换行的情况下,只有一行有 item ,此时 align-content 无效。那么由此反推,交叉轴方向上 item 的最大个数即主轴数,主轴方向上 item 的最大个数即交叉轴数。如下图,这就是双轴线
    CSS之Flex详解
  5. justify-content、align-items 和 align-content 似乎差不多?
    首先就他们可以取的值而言, align-content 似乎是 align-items 和 justify-content 的大杂烩,后面两个属性可以取得值 align-content 都可以取,更为巧合的是,取 align-items 的 align 和 justify-content 的 content 就组成了 align-content,这倒是挺有趣的。
    但是三者之间还是区别比较明显的。justify-content 就不说了,它的区别最明显,它是针对主轴的,而其他两个是针对交叉轴的。那么同样针对交叉轴的 align-content 和 align-items 有什么区别呢?
    首先看看定义,align-content 相较于 align-items 有一个明显的不同,那就是它不支持单轴线的操作。下图是单轴线情况下 align-items 和 align-content 的区别
    CSS之Flex详解 CSS之Flex详解 CSS之Flex详解
    可以看出,单轴线情况下 align-content 根本没起作用,而此时 align-items 就起到了非常关键的作用。接下来再看看多轴线情况下会发生什么
    CSS之Flex详解 CSS之Flex详解 CSS之Flex详解

于是两者之间的区别已经跃然纸上了。首先,align-content 单轴线无效,而 align-items 单轴线和多轴线都有效(但多线轴情况下其本质还是对单线轴的设置)。当两者同时使用且发生冲突时,align-content 的优先级别更高,也就是说,冲突时 align-content 的操作会覆盖掉 align-items 的操作
结论

  1. justify-content 是针对主轴的,而 align-content 和 align-items 是针对交叉轴的
  2. align-content 不支持单轴线,align-items 本质就是对每条轴线的操作
  3. 操作冲突时,align-items 的操作会被 align-content 覆盖掉