共计 1413 个字符，预计需要花费 4 分钟才能阅读完成。
Aligin Items
stretch
成果
代码
<div class="flex items-stretch bg-gray-200 h-24">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
1
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
2
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
3
</div>
</div>start
成果
代码
<div class="flex items-start bg-gray-200 h-24">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
1
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
2
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
3
</div>
</div>center
成果
代码
<div class="flex items-center bg-gray-200 h-24">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
1
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
2
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
3
</div>
</div>end
成果
代码
<div class="flex items-end bg-gray-200 h-24">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
1
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
2
</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
3
</div>
</div>baseline
成果
代码
<div class="flex items-baseline bg-gray-200 h-24">
<div
class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-base"
>
1
</div>
<div
class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-2xl"
>
2
</div>
<div
class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2 text-lg"
>
3
</div>
</div>
正文完
