共计 1664 个字符,预计需要花费 5 分钟才能阅读完成。
Justify Content
start
成果
代码
<div class="flex justify-start bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>
center
成果
代码
<div class="flex justify-center bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>
end
成果
代码
<div class="flex justify-end bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>
space-between
成果
代码
<div class="flex justify-between bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>
space-around
成果
代码
<div class="flex justify-around bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>
space-evenly
成果
代码
<div class="flex justify-evenly bg-gray-200">
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>
正文完