有关flexbox的基础知识
基础知识这里不详细赘述了，这篇文章写的非常好，稍微看一遍就行。
1. 把容器变成一个flexbox
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
flex |
display: flex |
容器 |
使元素变成一个flexbox |
inline-flex |
display: inline-flex |
容器 |
使元素变成一个inline的flexbox |
然后是flexbox的方向
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
flex-row |
flex-direction: row |
容器 |
flex方向设定为横向从左到右，这也是默认值 |
flex-row-reverse |
flex-direction: row-reverse |
容器 |
flex方向设定为横向从右到左 |
flex-col |
flex-direction: column |
容器 |
flex方向设定为坚向从上到下 |
flex-col-reverse |
flex-direction: column-reverse |
容器 |
flex方向设定为竖向从下到上 |
再然后是是否要折行
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
flex-nowrap |
flex-wrap: nowrap |
容器 |
不折行，默认值 |
flex-wrap |
flex-wrap: wrap |
容器 |
折行，文字段落式折行 |
flex-wrap-reverse |
flex-wrap: wrap-reverse |
容器 |
折行，贪吃蛇式折行 |
2. 当内部元素填不满所有空间时，如何在元素间留空隙
基本的向左、向右对齐与居中：元素之间紧贴在一起
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
justify-start |
justify-content: flex-start |
容器 |
元素堆叠到flebox的起点，对于flex-row来说，就是左对齐 |
justify-center |
justify-content: center |
容器 |
元素堆叠到flebox的中间，对于flex-row来说，就是居中 |
justify-end |
justify-content: flex-end |
容器 |
元素堆叠到flebox的终点，对于flex-row来说，就是右对齐 |
元素分散开来
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
justify-between |
justify-content: space-between |
容器 |
元素分散在flexbox中，但第一个和最后一个元素紧贴flexbox的起点与终点 |
justify-around |
justify-content: space-around |
容器 |
元素分散在flexbox中，第一个元素和最后一个元素距离flexbox起点与终点的距离，是元素间距离的一半 |
justify-evenly |
justify-content: space-evenly |
容器 |
元素分散在flexbox中，第一个元素和最后一个元素距离flexbox起点与终点的距离，与元素间距离一致 |
3. 在flexbox中仅有一行内容（没有折行），且元素高低不一致的时候，如何把它们排列成一行
“高低”这个描述并不准确，更准确的说，是元素在“flexbox垂直方向上尺寸不一致的时候”，如何把它们排列起来。但为了描述方便，我们就假定flexbox的方向是flex-row。
基本的居上、居下与居中
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
items-start |
align-items: flex-start |
容器 |
元素都顶着容器的上边线 |
items-center |
align-items: center |
容器 |
元素在垂直方向都居中 |
items-end |
align-items: flex-end |
容器 |
元素都顶着容器的下边线 |
根据文字内容来排列
不根据子元素的尺寸来决定垂直方向上各元素的位置，而是根据子元素中的文字baseline来决定：让所有子元素的baseline都处在同一条线上
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
items-baseline |
align-items: baseline |
容器 |
按元素的text baseline来统一元素位置，保证所有子元素的文字baseline在一条线上 |
在垂直方向拉伸元素，占满垂直方向的空间
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
items-stretch |
align-items: stretch |
容器 |
在垂直方向拉伸元素，占满垂直方向的空间 |
4. 在flexbox中有多行内容（有折行发生），如何在垂直方向上处理多余的空间
注意这里的tailwindcss类和CSS样式，在没有折行发生时，都没卵用。
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
content-start |
align-content: flex-start |
容器 |
居上 ，多行之间无空隙 |
content-center |
align-content: center |
容器 |
居中，多行之间无空隙 |
content-end |
align-content: flex-end |
容器 |
居下 ，多行之间无空隙 |
content-between |
align-content: space-between |
容器 |
多行分散在垂直空间上，但第一行与最后一行紧贴flexbox的上边与下边 |
content-around |
align-content: space-around |
容器 |
多行分散在垂直空间上，但第一行与最后一行距离flexbox上边与下边的距离，等于行间距的一半 |
content-evenly |
align-content: space-evenly |
容器 |
多行分散在垂直空间上，但第一行与最后一行距离flexbox上边与下边的距离，等于行间距 |
5. 精细控制元素之间的间距
下面的tailwindcss类与CSS样式，可以理解为“元素之间的最小间距”：即如果align-content和justify-content经过计算后的边距大于通过下面样式设置的边距的话，当然万事大吉。而如果align-content和justify-content经过计算的边距小于下面样式设定的边距的话，浏览器会以下面设定的边距为准。
即下面样式的边距设定，其优先级高于align-content和justify-content样式，即高于justify-xxx和content-xxx类
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
gap-3, gap-[23px] |
gap: 12px, gap: 23px |
容器 |
设定元素之间的最小边距，包括两个方向 |
gap-x-3, gap-x-[23px] |
column-gap: 12px, column-gap: 23px |
容器 |
设定元素在flex方向上的间距 |
gap-y-3, gap-y-[23px] |
row-gap: 12px, row-gap: 23px |
容器 |
设定元素在多行之间的行距 |
6. 上面介绍的都是应用在flex container上的样式，下面将介绍一些应用于各个元素上的样式
通常来讲，下面的样式优先级都要高于上面介绍的样式
改写元素的尺寸
flexbox中每个元素的尺寸(当flex-row或flex-row-reverse时，是横向尺寸)可以通过如下样式进行自定义。注意这里的“尺寸”说的是参与flex布局时，这个元素参与布局的尺寸。而不是这个元素的盒模型尺寸。
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
basis-auto |
flex-basis: auto |
元素 |
以元素盒模型的尺寸为布局尺寸，这也是默认值 |
basis-8, basis-1/2, basis-2xs, basis-[30px] |
flex-basis: 32px/50%/288px/30px |
元素 |
设定布局尺寸 |
尺寸决定后，元素本身还可以选择是否伸长或缩短，来吃掉空隙尺寸
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
grow-0 |
flex-grow: 0 |
元素 |
关闭伸长功能，这是该CSS样式的默认值 |
grow |
flex-grow: 1 |
元素 |
开启伸长功能，并且设置其股份为1 |
grow-2 |
flex-grow: 2 |
元素 |
开启伸长功能，并且设置其股份为2 |
shrink-0 |
flex-shrink: 0 |
元素 |
关闭缩短功能 |
shrink |
flex-shrink: 1 |
元素 |
开启缩短功能，并且设置其股份为1，这是该CSS样式的默认值 |
shrink-2 |
flex-shrink: 2 |
元素 |
开启缩短功能，并且设置其股份为2 |
CSS中有个样式flex，其应用在元素上时，相当于flex-grow, flex-shrink, flex-basis三个样式的组合，tailwind中也有，如下：
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
flex-auto |
flex: 1 1 auto，相当于flex-grow:1; flex-shrink:1, flex-basis:auto |
元素 |
|
flex-initial |
flex: 0 1 auto，相当于flex-grow:0; flex-shrink:1, flex-basis:auto |
元素 |
|
flex-none |
flex: none，相当于flex-grow:0; flex-shrink:0, flex-basis:auto |
元素 |
|
覆盖父容器有关在垂直方向上如何摆放自己的样式
| tailwind类名 |
对应的CSS属性和值 |
应用在容器还是元素身上 |
效果 |
self-auto |
align-self: auto |
元素 |
如何排放取决于父元素的align-items样式，即tailwindcss中的items-start/end/center/baseline等 |
self-start |
align-self: flex-start |
元素 |
顶上边上 |
self-center |
align-self: center |
元素 |
垂直居中 |
self-end |
align-self: flex-end |
元素 |
顶下边线 |
self-baseline |
align-self: baseline |
元素 |
以文字的baseline为基准，但单独一个元素设置该样式到底是什么行为，你最好用前测试一下 |
7. 总结
- 所有有关
grow和shrink的样式都尽量避免别用，因为基本上很少有人能说得清justify-content, align-items, align-content这三个属性，配合着grow, shrink的时候行为是什么。如果要控制内容之间的间距，更方便的做法是去控制元素内部各种东西的宽高，margin, padding等
- 在CSS中，
justify, align, item, content这四个单词的排列组合到底代表的是哪个方向，很容易搞混，在tailwind中，虽然问题没有简化，但记忆难度下降了：
我们把flex假定为flex-row，那么这时问题有发一点点简化：
justify都指的是左右方向，即水平方向align都指的是上下方向，即垂直方向
| 组合 |
水平方向: justify |
垂直方向: align |
flexbox样式: content |
justify-content : flexbox水平方向上元素的间距 |
align-content : flex折行后，垂直方向上，多行之间的间距 |
gridbox样式: items |
justify-items : grid中单元格在水平方向上应当是居左/中/右，对flex没意义 |
align-items : grid中单元格在垂直方向上居上/中/下，以及flex在垂直方向上应当是居上/中/下 |
元素样式: self |
justify-self : grid元素用来覆盖justify-item的样式，对flex没意义 |
align-self : grid和flex中的元素用来覆盖align-items的样式 |
