Flexbox 是一种 CSS 布局模型，用于在容器中以灵活的方式排列元素。它有一组非常强大的属性，帮助你实现响应式、动态、对齐等效果。
相关属性
使用要明确区分清楚这些属性是应用于容器的属性还是应用于子元素(子项目)的属性
容器属性
-
display: flex;
启用 Flexbox 布局，默认是水平排列。 -
flex-direction
定义主轴方向：row（默认）：水平排列，左到右。row-reverse：水平排列，右到左。column：垂直排列，上到下。column-reverse：垂直排列，下到上。
-
flex-wrap
控制是否换行：nowrap（默认）：所有项排在一行内。wrap：项会换行。wrap-reverse：换行，但反转排列方向。
-
flex-flow
flex-flow是flex-direction和flex-wrap的简写：flex-flow: row wrap;是flex-direction: row和flex-wrap: wrap的结合。
-
justify-content
定义主轴（水平或垂直）的对齐方式：flex-start（默认）：对齐到容器的起始位置。flex-end：对齐到容器的结束位置。center：居中对齐。space-between：项目之间的间隔均匀分布，第一个和最后一个项目分别对齐到容器的两端。space-around：项目之间的间隔均匀分布，项目的两端与容器边缘有一半的间隔。space-evenly：项目之间的间隔均匀分布，包括容器两端。
-
align-items
控制交叉轴（垂直或水平）上的对齐方式：stretch（默认）：项目将被拉伸以填充容器。flex-start：对齐到容器的顶部或左边。flex-end：对齐到容器的底部或右边。center：垂直或水平居中。baseline：对齐项目的基线。
-
align-content
控制多行之间的对齐方式（如果有多行，且换行时有效）：stretch（默认）：所有行之间的间距将被平均分配，拉伸以填充容器。flex-start：行对齐到容器的顶部。flex-end：行对齐到容器的底部。center：行居中。space-between：行之间的间隔均匀分布。space-around：行之间的间隔均匀分布，容器两端有一半的间隔。space-evenly：行之间的间隔均匀分布。
子元素属性
-
order
控制项目的排列顺序，默认值是0，值越小的元素会先排列。 -
flex-grow
控制项目的放大比例，默认值是0。项目将根据剩余空间进行放大，1表示项目占据所有剩余空间。 -
flex-shrink
控制项目的收缩比例，默认值是1。如果空间不足，项目会根据这个值进行收缩。 -
flex-basis
设置项目的初始主轴大小，默认值是auto，即项目的原始尺寸。如果设为0，项目的大小不会超过剩余空间的大小。 -
flex
flex是flex-grow,flex-shrink和flex-basis的简写，默认值是0 1 auto。常见的用法是：flex: 1：等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0;，让项目尽可能地占用空间。flex: none：等同于flex-grow: 0; flex-shrink: 0; flex-basis: auto;，项目不放大或收缩。
-
align-self
允许单个项目重新定义其在交叉轴上的对齐方式，覆盖容器上的align-items设置：auto（默认）：继承容器的align-items设置。flex-start：对齐到容器的起始位置。flex-end：对齐到容器的结束位置。center：居中对齐。baseline：对齐基线。stretch：拉伸以填充交叉轴。
使用示例
只针对较容易混淆的属性进行举例
为精简用例, 以下示例均为 unocss 形式的代码片段; 若不清楚例子中的类所对应的具体css属性以及属性值可参数tailwindcss官方文档. 或者直接在演练场中预览
justify-content: space-around/space-evenly
// evenly
<div class="flex py-10px bg-pink justify-evenly">
<div class="w-32 h-32 leading-32 text-center bg-blue-500">项目 1</div>
<div class="w-32 h-32 leading-32 text-center bg-red-500">项目 2</div>
<div class="w-32 h-32 leading-32 text-center bg-green-500">项目 3</div>
<div class="w-32 h-32 leading-32 text-center bg-yellow-500">项目 4</div>
<div class="w-32 h-32 leading-32 text-center bg-purple-500">项目 5</div>
<div class="w-32 h-32 leading-32 text-center bg-blue-500">项目 6</div>
</div>
// around
<div class="flex py-10px bg-pink justify-around">
<div class="w-32 h-32 leading-32 text-center bg-blue-500">项目 1</div>
<div class="w-32 h-32 leading-32 text-center bg-red-500">项目 2</div>
<div class="w-32 h-32 leading-32 text-center bg-green-500">项目 3</div>
<div class="w-32 h-32 leading-32 text-center bg-yellow-500">项目 4</div>
<div class="w-32 h-32 leading-32 text-center bg-purple-500">项目 5</div>
<div class="w-32 h-32 leading-32 text-center bg-blue-500">项目 6</div>
</div>
效果图
区分在于子元素之间的间距与容器边缘和子元素之间的间距是相等间距(evenly)还是一半间距(around).
align-items: baseline/stretch
align-items: baseline
<div class="flex items-start space-x-4 border-b-1 border-b-red border-b-solid">
<div class="text-sm">小字体</div>
<div class="text-lg">大字体</div>
<div class="text-xl">更大的字体</div>
</div>
<div class="flex items-center space-x-4 border-b-1 border-b-red border-b-solid mt-10">
<div class="text-sm">小字体</div>
<div class="text-lg">大字体</div>
<div class="text-xl">更大的字体</div>
</div>
<div class="flex items-baseline space-x-4 border-b-1 border-b-red border-b-solid mt-10">
<div class="text-sm">小字体</div>
<div class="text-lg">大字体</div>
<div class="text-xl">更大的字体</div>
</div>
效果图
align-items: stretch 需要指定容器高度才能有效果
<div class="bg-amber h-100px flex justify-evenly items-stretch">
<div class="basis-150px bg-blue" ></div>
<div class="basis-150px h-50px bg-blue self-center"></div>
<div class="basis-150px bg-blue" ></div>
</div>
效果图
align-self
子元素的self-center覆盖容器的items-stretch
<div class="bg-amber h-100px flex justify-evenly items-stretch">
<div class="basis-150px bg-blue" ></div>
<div class="basis-150px h-50px bg-blue self-center"></div>
<div class="basis-150px bg-blue" ></div>
</div>
效果图
