Flex布局学习笔记

0. 前言

这是当前最常用的布局方案，没有之一。当我回想时，我才发现自己对Flex布局如此不熟悉。所以写篇博客，既当学习笔记，又当知识分享。

1. 是什么

通常又被称为Flexbox，是一种一维布局的模型。因其一次只能处理一个维度上的元素布局：一行或者一列^[2]。

我们可以使用如下语句将一个标签声明为使用flex布局。如下面代码所示。被声明的标签即成为flex容器。

下面的示例代码显示效果如下：

image.png

HTML代码：

CSS代码(stylus)：

.flexbox
  display flex

#one
  border 10vw solid red

#two
  border 10vw solid blue

2. 改变flex流方向

可以通过flex-direction改变。可以取4个值：

• row(默认值)
• row-reverse
• column
• column-reverse

将第一部分示例代码改变flex-direction为row-reverse之后显示效果如下：

image.png

将第一部分示例代码改变flex-direction为column之后显示效果如下：

image.png

将第一部分示例代码改变flex-direction为column-reverse之后显示效果如下：

image.png

Flexbox使用双轴对齐方案：main axis(主轴)与cross axis(交叉轴)。

当flex-direction属性为row或row-reverse时：main axis是x轴，cross axis是y轴。当flex-direction属性为column或column-reverse时：反过来。

image.png

如何判定方向：当主轴为x轴，且flex-direction取值为row时，起点是左，终点是右。其他取值同理。

3. flex容器

采用了flexbox的区域即flex容器。所有的flex容器都有如下行为：

• 元素排列为一行或一列。(由flex-direction决定)
• 元素从主轴的起点开始
• 元素不会在主维度方向拉伸，但可以缩小
• 元素被拉伸来填充交叉轴大小
• flex-basis默认取值为auto
• flex-wrap默认取值为nowrap

如果有太多元素超出容器，那么它们会溢出而不会换行。

4. 从视觉上改变顺序

示例代码如下：

    
A
    
B
    
C
    
D

对应的CSS代码如下：

#container{
    display: flex;
}

#a { order: 2; }
#b, #d { order: 3; }
#c { order: 1; }

最终显示样式如下：

image.png

但是，这样仅仅是在视觉上改变了顺序，而非事实上。

5. 使用flex-wrap实现换行

可以使用flex-wrap : wrap实现。

示例代码显示如下：

image.png

6. 简写属性flex-flow

可以将flex-direction与flex-flow组合为简写属性flex-flow。第一个指定的值为flex-dirction，第二个指定的值为flex-flow。

格式(使用stylus预处理器):

.box
    display flex
    flex-flow row-reverse wrap

7. flex元素属性

本部分涉及到的是如下三个属性：

• flex-grow
• flex-shrink
• flex-basis

三个属性可以合写为flex。其书写顺序为flex-grow、flex-shrink、flex-basis。

格式如下(stylus预处理器)：

$grow = 1
$shrink = 1
$basis = 1

.box
    display flex
    flex $grow $shrink $basis

7.1 flex-grow

flex元素以flex-basis为基础，沿主轴方向增长尺寸，使得该元素延展，并占据方向轴上的可用空间。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

flex-grow属性可以按比例分配空间。下面的示例代码：

    
One
    
Two
    
Three

#box
    display flex

#one
    flex-grow 2

如果第一个元素 flex-grow 值为2， 其他元素值为1，则第一个元素将占有2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有1/4（各50px）。

7.2 flex-shrink

与flex-grow起到的作用完全相反，用于处理flex元素收缩的问题。如果flex容器中无足够空间排列元素，那么可以通过设置flex-shrink属性为正整数，使得元素缩小到flex-basis以下。

7.3 flex-basis

用于定义flex元素空间大小。如果不指定flex-basis，那么flex元素的flex-basis值自动采用元素内容尺寸。

8. 元素间的对齐与空间分配

这一部分MDN讲的更详细，所以以下内容皆为摘录。本部分涉及属性：

• justify-content
• align-items

8.1 justify-content

本属性用于元素在主轴方向上对齐。可以取的值有如下：

• strech
• flex-start
• flex-end
• center
• space-around
• space-between

8.2 align-items

本属性用于元素在交叉轴方向上对齐。可以取的值如下：

• stretch
• flex-start
• flex-end
• center

References

1. The Book of CSS3 (豆瓣) (douban.com)
2. flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)
3. flex - CSS（层叠样式表） | MDN (mozilla.org)