目录
一、简介二、父元素属性2.1、flex-direction2.2、justify-content2.3、align-items2.4、flex-wrap2.5、flex-flow2.6、align-content
三、子元素属性3.1、flex3.2、align-self3.3、order
一、简介
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。本文中源码，并不是每次都一样，会有一些区别，比如有时没有宽度等，不要一直在一个源码上改，没有特别说明都是一个属性对一个源码。 还有就是本文说得 Flex布局的属性都是常见属性，并不是只有这些，如果想学更多属性，可以参考官网，或者其他学习网站。
二、父元素属性
2.1、flex-direction
flex-direction 顺序指定了弹性子元素在父容器中的位置，flex-direction的值有:
flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
示例代码
结果图如下：
2.2、justify-content
属性用于控制 Flex 容器内部 Flex 子项沿着主轴的对齐方式。这个属性适用于控制 Flex 容器中的内容在主轴上的排列位置。justify-content的值有:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
flex-start：默认值。Flex 子项在主轴上与 Flex 容器的起始位置对齐flex-end：Flex 子项在主轴上与 Flex 容器的末尾位置对齐center：Flex 子项在主轴上居中对齐space-between：Flex 子项沿主轴均匀分布，首尾两端不留间隙space-around：Flex 子项沿主轴均匀分布，两侧留有相等的间隙space-evenly: Flex 子项沿主轴均匀分布，包括首尾两端和子项之间都留有相等的间隙
示例代码
当 flex-direction: row 结果图如下：
在上面的源码基础上，设置 flex-direction: column 结果图如下：
2.3、align-items
属性用于控制 Flex 容器内部 Flex 子项在交叉轴上的对齐方式。align-items 可以设置的属性值：
align-items: stretch | flex-start | flex-end | center | baseline
stretch（默认值）：拉伸子项以填满整个交叉轴的空间flex-start：子项在交叉轴的起点对齐flex-end：子项在交叉轴的末端对齐center：子项在交叉轴上居中对齐baseline：子项根据它们的基线（如果有）对齐
示例代码
结果图如下： 当 align-items: stretch 时，示例代码如下：
结果图如下： 当 align-items: baseline 时，示例代码如下：
结果图如下：
2.4、flex-wrap
在 Flex 布局中，flex-wrap 属性用于控制 Flex 容器中的 Flex 子项是否换行。flex-wrap的值有:
flex-wrap: nowrap | wrap | wrap-reverse
nowrap（默认值）：不换行，所有 Flex 子项会尽量排在一行内wrap：允许 Flex 子项在需要时换行，第一行在上方，紧接着的行在下方wrap-reverse：允许 Flex 子项在需要时换行，第一行在下方，紧接着的行在上方
示例代码
结果图如下：
2.5、flex-flow
flex-flow 是一个缩写属性，结合了 flex-direction 和 flex-wrap 两个属性，用于同时设置 Flex 容器的主轴方向和子项的换行方式，flex-flow 属性的语法格式如下：
flex-flow:
这里 flex-direction、flex-wrap就是我们上面提到的取值，随意组合。
示例代码
结果图如下：
2.6、align-content
align-content 属性用于控制多根轴线（Flex 容器内部的行或列）在交叉轴上的对齐方式，当有多根轴线时才会生效。它可以设置的属性值有：
align-content：stretch | flex-start | flex-end | center | space-between | space-around | space-evenly
stretch：默认值。轴线占满整个交叉轴，如果子项没有设置高度，将被拉伸至与容器相同的高度flex-start：多根轴线在交叉轴的起始位置对齐flex-end：多根轴线在交叉轴的末端位置对齐center：多根轴线在交叉轴上居中对齐space-between：轴线均匀分布在交叉轴上，首尾两根轴线与容器边框对齐，轴线之间间隔相等space-around：轴线均匀分布在交叉轴上，轴线两侧的间隔是轴线之间间隔的一半space-evenly：轴线均匀分布在交叉轴上，包括轴线两侧和轴线之间的间隔均相等
示例代码
结果图如下：
当 align-content: stretch 时示例代码如下：
结果图如下：
三、子元素属性
3.1、flex
在 CSS 的 Flex 布局中，flex 属性是一个复合属性，用于设置 Flex 容器内 Flex 项目的伸缩能力、伸缩基准以及伸缩项目占据的空间比例。flex 属性可以设置三个值，分别是：
flex：flex-grow | flex-shrink | flex-basis
flex-grow：定义 Flex 项目的放大比例，默认值为 0。它决定了 Flex 项目在有剩余空间时的放大比例，如果为 0，则不放大。flex-shrink：定义 Flex 项目的收缩比例，默认值为 1。它决定了 Flex 项目在空间不足时的收缩比例，如果为 0，则不收缩。flex-basis：定义了 Flex 项目在分配多余空间之前，所占据的空间大小，默认值为 auto。可以设置为具体的长度值或百分比，也可以设置为 content、auto 等。
示例代码
结果图如下：
3.2、align-self
align-self 属性用于覆盖 Flex 容器的 align-items 属性，单独为 Flex 项目设置在交叉轴上的对齐方式。它可以用于单个 Flex 项目，控制该项目在交叉轴上的对齐方式。
align-self：stretch | center | flex-start | flex-end | baseline | auto
auto：使用父元素（即 Flex 容器）的 align-items 值。flex-start：项目向交叉轴起始位置对齐。flex-end：项目向交叉轴末端位置对齐。center：项目在交叉轴上居中对齐。baseline：项目根据它们的基线对齐。stretch：项目被拉伸以适应交叉轴。
示例代码
结果图如下：
3.3、order
在 Flex 布局中，order 属性用于控制 Flex 项目的排列顺序。它指定了 Flex 容器内各个项目的排列顺序，值为整数，可以是正数、负数或零。
默认情况下，Flex 项目的 order 属性值为 0，表示它们按照其在源代码中的顺序依次排列。当给定了不同的 order 值时，数值小的项目将优先排在前面，数值大的项目排在后面。
示例代码
事例图：