flexbox 弹性盒布局和布局原理

最近开始做H5,发现flexbox用的超级广泛,找到了这么一篇文章,https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错,加上自己的一些测试和理解,就有了这一篇笔记。

新版的flexbox规范分两部分:一部分是container,一部分是 items。
flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`float: left;` 这样简单的布局要复杂很多。

基本原理


容器上有 主轴和纵轴的概念,默认主轴(main-axis)是横向,从左到右,纵轴是竖向,从上到下。其中所有的孩子的布局都会受到这两个轴的影响。后面会讲到,有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

div上设置 `display: flex` 或者 `display: inline-flex` 来变成一个flex容器。然后给其中的每一个孩子设置 `flex: [number]` 来让他们按比例分配容器的宽度。
比如三个item分别设置了 `flex: 1` `flex: 2` `flex: 1` 则他们是按照 1-2-1 的比例来分配宽度的。

如果有item没有设置 `flex` 而是设置了宽度,比如 `width: 100px` 那么它的宽度就不受flex容器的影响,但是其他的设置了 `flex: [number]` 的容器会按比例平分剩下的部分。即使通过 `width: 100px` 的方式定死宽度,除了和 flex: 1 的宽度计算方式不同之外,其他并没有不同。
其实应该说,如果一个孩子没有通过 flex: 1的方式来定义宽度,那么会根据非flex的方式来优先计算它的宽度,然后其他的声明了flex的孩子再按比例分配剩下的宽度。
如下图所示,其中只有第一个孩子声明了 `flex:1` ,后面的都没有申明宽度,那么在flexbox容器中,后面的7个孩子都是由他们中的文字撑开的宽度,剩余的宽度全部分配给第一个孩子。


后面还会仔细讲 `flex: 1` 定义孩子宽度的细节。


container


display
`display: flex` 或者 `display: inline-flex` 来声明一个flexbox容器

flex-direction


items的排列方向,其实就是改变了上面所说的 主轴方向,所以这个属性会其他属性产生影响,因为整个flexbox的布局都是由主轴和纵轴决定的。

row: 从左到右
row-reverse: 从右到左
column: 从上到下
column-reverse: 从下到上

下面分别是这四个值的结果


flex-wrap
当内容超出之后是否折行。

nowrap:不换行,而是通过收缩每一个孩子的宽度来挤在一行。
wrap: 换行。
wrap-inverse: 换行,但是折行方向相反,(比如默认是折到下一行,但是这个属性会导致折到上一行)。

如下图所示,分别是上述的三个值的效果,其中每一个孩子宽度为 40px,8个孩子已经超出了容器的 200px宽度。


flex-flow
flex-direction 和 flex-wrap 的组合写法。

justify-content
不知道如何准确翻译 justify 这个词。它的作用是定义了如何分配剩余的空白区域。

flex-start:主轴方向
flex-end: 主轴反方向
center: 挤在中间
space-between: 中间有空白。
space-around: 中间和两边都有空白。其中两侧的空白是中间的一半宽度,可以理解为每个孩子两侧都有相同宽度的空白,并且空白不合并。

上面说过,flex-direction 会改变主轴方向,下面我们看看 flex-direction 为默认情况下(从左到右)这五个不同值的区别:

发现一个bug,在chrome下,在调试器下直接切换space-between  space-around 是不生效的。
然后我们设置一下 `flex-direction: column`,会发现他们的主轴已经变成从到上下了:



align-items
孩子的对齐方式,这个比较好理解。就是孩子的对齐方式。
注意,这里的“对齐”指的是纵轴上的对齐方式,所以,这个属性也是受 `flex-direction` 影响的。

比如我有一个高度为100 px的容器,那么默认情况下,是scratch,就是在纵轴上填满容器。

如上图所示,只定义了容器高度,默认情况下孩子的高度就会填满容器。
如果我改成`align-items: flexstart`  就会是这样


align-items 所有属性值如下:
flex-start: 纵轴开始
flex-end: 纵轴结束
center: 纵轴居中
baseline: 纵轴的baseline
scratch: 填满容器。

align-content
当有多行内容的时候,这个属性决定了如何对多行内容进行对齐。
注意,上面的每一个属性都是以每一个item为单位进行布局,而这个属性是以一行为单位进行布局。感觉这个属性应该叫 align-lines 比较合适。
如果只有一行的话,这个属性是不生效的,所以一定要配合 `flex-wrap: wrap` 来使用。




items


order
很简单,排列顺序,没什么好讲的。

flex-grow
定义了主轴上,孩子分配剩余空白区域的比例。
比如现在有三个孩子,宽度是 40px,并且`margin: 2px`,容器宽度 200px,那么默认情况下,有 `(200-44)/3=68` 空白的宽度。

如果你给每个孩子都定义了 `flex-grow: 1`,那么他们平分剩余的空白区域,就是这样:


这时候,如果我给第二个孩子定义 `flex-grow: 2`,那么它的宽度是怎么计算的?
其实就是把 68px 的空白按照`1:1:2` 的比例分配给他们,也就是 `17:17:34` 的大小来分配,所以三个孩子的宽度分别为 `57,57,74`:


如果你给一个孩子设置为 `flex-grow: 0` 那么它不会参与剩余空白的分配。

flex-shrink
如果孩子的总宽度超过了容器宽度(主轴),那么这个属性定义了如何把超过的那部分平分到每个孩子身上,然他们按比例来缩小一定的宽度从而可以在容器中装得下。

假设我们现在有一个容器,宽度为 `200px`,有三个孩子宽度为 `100px`,并且每个海泽有 `margin: 2px`,那么三个孩子总宽度 `(100+2*2)*3 = 312px` ,超过了 112px。
所以我们从这三个孩子身上砍下 `112px` 宽度,以让他们能装进容器中。
默认情况下,是 按 `1:1:1` 的比例来砍,也就是每个孩子各砍下 “112/3=37.3“,所以默认每个孩子宽度是 100-37.3=62.7。
那么现在我们定义第二个孩子 `flex-shrink: 2`,其他两个为 1,那么他们会把 `112px` 的宽度按 `1:2:1` 来平分。于是第二个孩子宽度为 `100-(112/4*2)=44px` 宽度,另外两个为`100-(112/4*1)=72px`:


flex-basis
在分配空白之前,孩子的宽度,默认是 `auto`,也就是孩子本身的宽度,如果你定义了 `flex-basis: 50px;` ,那么它就会覆盖掉孩子的宽度。

flex
他是 flex-grow, flex-shrink, flex-basis三个属性的快捷方式。默认是 0, 1, auto。
强烈建议用这个属性,而不是分别设定三个属性,因为这个属性可以“聪明地”设定三个属性来达到你要的效果。
你可以认为 flex 属性就是定义了每个孩子分隔父容器宽度的比例。
比如容器 200px,三个孩子设置了 flex 分别是 1-2-1,那么他们实际上宽度是 50px 100px 50px。

如果你比较较真,这个flex属性到底是如何工作的?
实际上他是自动设置了三个属性:flex-grow, flex-shrink, flex-basis。
而且为什么强烈推荐用flex,而不是分别设定三个属性,是因为 flex 属性会自动计算 flex-basis 属性的值。
比如容器宽度为 200px,然后你给三个孩子分别设置了
.item1 { flex: 1;}
.item2 { flex: 2;}
.item3 { flex: 1;}
那么他们的宽度将是 50-100-50
如果你想单独设置每一个孩子的三个属性,你会发现竟然无法按照 1-2-1 的比例平分了。
因为flexbox的计算每个孩子的宽度分两部分:
1,计算出孩子本身的宽度
2,将剩余的空白按比例平分给每一个孩子。
所以你如果这样定义:
.item1 { flex-grow: 1;flex-shrink:1;}
.item2 { flex-grow: 2;flex-shrink:2;}
.item3 { flex-grow: 1;flex-shrink:1;}
你会发现孩子不是 50-100-50 的宽度,因为他们是按照 1-2-1 平分了剩余的空白。
假设每个孩子本身是 20px 宽度,那么这么定义之后,他们其实按 1-2-1 平分了 140px 的空白。加上自身宽度之后比例 显然不是 1-2-1。
所以你还需要把它们的flex-basis也设置成 1-2-2,这么写才行:
.item1 { flex-grow: 1;flex-shrink:1;flex-basis: 20px;}
.item2 { flex-grow: 2;flex-shrink:2;flex-basis: 40px;}
.item3 { flex-grow: 1;flex-shrink:1;flex-basis: 20px;}

而这样就很麻烦,不如直接用 flex 属性来定义。而事实上,你可以认为 flex 属性就是帮你做了上面的计算。

align-self
单独在当前孩子上覆盖了 align-items 属性。
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭