flex布局以及flex的六大属性

熟悉 Flex 需要先了解 Flex 的下面这 6 个 CSS 属性：

/* 设置 Flex 模式 */
display: flex;

/* 决定元素是横排还是竖着排，要不要倒序 */
flex-direction: column;

/* 决定元素换行格式，一行排不下的时候如何排 */
flex-wrap: wrap;

/* flex-flow = flex-direction + flex-wrap */
flex-flow: column wrap;

/* 同一排下对齐方式，空格如何隔开各个元素 */
justify-content: space-between;

/* 同一排下元素如何对齐，顶部对齐、中部对齐还是其他 */
align-items: center;

/* 多行对齐方式 */
align-content: space-between;

下面我们详细分析这些元素的情况：

知识点 1. flex-direction：决定主轴的方向

• row - （默认）水平方向，起点在左端
• row-reverse - 水平方向，起点在右端
• column - 垂直方向，起点在上沿
• column-reverse - 垂直方向，起点在下沿

display: flex;

flex-direction: row | row-reverse | column | column-reverse;

知识点 2. flex-wrap：一条轴线（一行）排不下时如何解决

• nowrap - （默认）不换行
• wrap - 换行，第一行在上方
• wrap-reverse - 换行，第一行在下方

display: flex;

flex-wrap: nowrap | wrap | wrap-reverse;  

知识点 3. flex-flow：flex-flow = flex-direction + flex-wrap。即 flex-flow 是这两个属性的合集

• row nowrap - （默认）水平方向，起点在左端，不换行

display: flex;

flex-flow: <flex-direction> || <flex-wrap>;

详解参考 1 和 2

知识点 4. justify-content：定义项目在主轴上的对齐方式

• flex-start - 左边对齐
• flex-end - 右边对齐
• center - 居中对齐
• space-between - 两端对齐，空格在中间
• space-around - 空格环绕

display: flex;

justify-content: flex-start | flex-end | center | space-between | space-around;

知识点 5. align-items：定义项目在交叉轴上如何对齐

• flex-start - 顶部对齐，即文字图片等顶部同一条线上
• flex-end - 底部对其，即文字图片等底部在同一条线上
• center - 中间对其，即文字图片不管多高，都拿它们的中间放在同一条线上
• stretch - 将文字图片充满整个容器的高度，强制统一
• baseline - 将每项的第一行文字做统一在一条线上对齐

display: flex;

align-items: flex-start | flex-end | center | stretch | baseline;

知识点 6. align-content：定义多根轴线的对齐方式。如果只有一根轴线（只有一行），该属性不起作用

• flex-start - 这几行顶部对齐
• flex-end - 这几行底部对齐
• center - 这几行居中对齐
• stretch - 这几行进行扩展或者缩放，从而填满容器高
• space-between - 这几行中间使用空格进行填充
• space-around - 这几行两边及中间进行填充

display: flex;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• 本文档引自与掘友–梁sir 同时也是自己的学习经历+ 文档补充
• 梁sirGit地址：https://github.com/LiangJunrong/document-library