Flex布局学习笔记
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-reversecolumncolumn-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时，起点是左，终点是右。其他取值同理。
flex容器
采用了flexbox的区域即flex容器。所有的flex容器都有如下行为：
元素排列为一行或一列。(由
flex-direction决定)元素从主轴的起点开始
元素不会在主维度方向拉伸，但可以缩小
元素被拉伸来填充交叉轴大小
flex-basis默认取值为autoflex-wrap默认取值为nowrap
如果有太多元素超出容器，那么它们会溢出而不会换行。
作者：拜仁的月饼
链接：https://juejin.cn/post/7019956075541561352