0. 前言
这是当前最常用的布局方案，没有之一。当我回想时，我才发现自己对Flex布局如此不熟悉。所以写篇博客，既当学习笔记，又当知识分享。
1. 是什么
通常又被称为Flexbox，是一种一维布局的模型。因其一次只能处理一个维度上的元素布局：一行或者一列[2]。
我们可以使用如下语句将一个标签声明为使用flex布局。如下面代码所示。被声明的标签即成为flex容器。
<div class="flexbox">
</div>
<style>
.flexbox{
/*声明某标签为flexbox*/
display: flex;
}
/*也可以使用inline-flex语句声明*/
.flexbox{
display: inline-flex;
}
</style>
下面的示例代码显示效果如下：
image.png
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-reversecolumncolumn-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. 从视觉上改变顺序
示例代码如下：
<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; }
最终显示样式如下：
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-growflex-shrinkflex-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-contentalign-items
8.1 justify-content
本属性用于元素在主轴方向上对齐。可以取的值有如下：
strechflex-startflex-endcenterspace-aroundspace-between
8.2 align-items
本属性用于元素在交叉轴方向上对齐。可以取的值如下：
stretchflex-startflex-endcenter
网友评论