tailwind中的弹性布局

定义容器

元素排列方向

flex-row            左->右
flex-row-reverse    右->左
flex-col            上->下
flex-col-reverse    下->上

元素换行

flex-wrap           自动换行，向下方换行，第一行在上方
flex-wrap-reverse   自动换行，向上方换行，第一行在下方
flex-nowrap         不换行，所有元素宽度等比例缩小

水平对齐

justify-normal      不考虑对齐
justify-start       start对齐
justify-end         end对齐
justify-center      居中对齐
justify-between     两端分散对齐
justify-around      元素左右两侧间隔相等分散对齐
justify-evenly      所有间隔相等分散对齐，开头和结尾间隔是其余间隔的2倍
justify-stretch     元素沿容器主轴填充可用空间

垂直对齐

content-normal      不考虑对齐
content-center      居中对齐
content-start       start对齐
content-end         end对齐
content-between     从两端分散对齐
content-around      元素左右两侧间隔相等分散对齐
content-evenly      所有间隔相等分散对齐，开头和结尾间隔是其余间隔的2倍
content-stretch     元素沿容器主轴填充可用空间

元素垂直对齐

items-start     顶部对齐
items-end       底部对齐
items-center    水平中间线对齐
items-baseline  第一行文字的基线对齐
items-stretch   如果元素高未设置或为auto，将占满整个容器的高度

子元素之间的外边距

gap-[px]
gap-x-[px]
gap-y-[px]

元素设置

元素放大

如果存在剩余空间元素的放大比例，默认为0，表示不放大

如果所有元素都为1，则它们将等分剩余空间（如果有的话）

如果其中一个元素为2，其他都为1，则前者占据的剩余空间将比其他项多一倍

任意值： grow-[num]
grow      对应：flex-grow: 1;
grow-0    对应：flex-grow: 0;

元素缩小

如果空间不足元素的缩小比例，0表示不缩小，默认为1，负值无效

任意值： shrink-[num]
shrink      对应：flex-shrink: 1;
shrink-0    对应：flex-shrink: 0;

初始大小

在分配多余空间之前，元素占据的水平宽度

浏览器根据这个属性，计算主轴是否有多余空间

它的默认值为auto，即项目的本来大小

它可以设为跟width或height属性一样的值（比如350px，20%）

任意值： basis-[%/px]

预设值

basis-分数： 分数可用的分母为2、3、4、5、6、12
    如basis-2/5、basis-7/12

元素的放大缩小及初始大小

是上面三个属性的集合，对应css中的flex属性，flex:grow shrink basis

任意值：  flex-[grow_shrink_basis]

常用预设值
flex-1，      对应flex: 1 1 0%，允许元素放大和缩小，忽略初始大小
flex-initial  对应flex: 0 1 auto，允许元素缩小禁止放大，考虑初始大小
flex-auto     对应flex: 1 1 auto，允许元素放大和缩小，考虑初始大小
flex-none     对应flex: 0 0 auto，禁止元素放大和缩小

自身垂直对齐

允许单个元素有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性

如果没有父元素，则等同于stretch

self-auto
self-start
self-end
self-center
self-stretch
self-baseline

元素排序

定义元素的排列顺序，数值越小越靠前，可以为负数，默认为0

任意值： order-[num]

预设值
order-none     对应：order: 0;
order-<1-12>   对应：order:1-12
order-first    对应：order: -9999;
order-last     对应：order: 9999;