0. 前言

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

1. 是什么

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

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

<div class="flexbox">
</div>

<style>
.flexbox{
    /*声明某标签为flexbox*/
    display: flex;
}

/*也可以使用inline-flex语句声明*/
.flexbox{
    display: inline-flex;
}
</style>

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

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="flexbox">
    <div id="one"></div>
    <div id="two"></div>
  </div>
</body>
</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之后显示效果如下：

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

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

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

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

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

3. flex容器

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

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

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

4. 从视觉上改变顺序

示例代码如下：

<div id="container">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
    <div id="d">D</div>
</div>

对应的CSS代码如下：

#container{
    display: flex;
}

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

最终显示样式如下：

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

5. 使用flex-wrap实现换行

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

示例代码显示如下：

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属性可以按比例分配空间。下面的示例代码：

<div id="box">
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
</div>

#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-between：间隔对齐
space-around：间隔对齐2

【读书笔记】Flex布局学习笔记