Html 在 flexbox 中使用 spacer 是否有效

发布于07月17日

我有4个div，我想要容器左边的两个，另外两个在右边.

我成功地做到了这一点，你认为这是tailwind -css还是总体上的一个好方法？

div.flex {
    background-color: #eee;
    outline: 1px solid #999;
}

div.flex > * {
    background-color: #ccc;
    outline: 1px solid #333;
}

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="sticky w-full h-16 gap-2 flex items-center">
    <div class="ml-4 w-8 h-8"></div>
    <div class="w-8 h-8"></div>
    <div class="grow"></div>
    <div class="w-8 h-8"></div>
    <div class="mr-4 w-8 h-8"></div>
</div>

推荐答案

不，不应该引入HTML元素来添加样式.您的HTML代码应该只反映您的内容，并且应该使用CSS来设置元素的样式/位置.

在第三个元素上使用ml-auto

div.flex {
    background-color: #eee;
    outline: 1px solid #999;
}

div.flex > * {
    background-color: #ccc;
    outline: 1px solid #333;
}

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div class="sticky w-full h-16 gap-2 flex items-center">
    <div class="ml-4 w-8 h-8"></div>
    <div class="w-8 h-8"></div>
    <div class="w-8 h-8 ml-auto"></div> 
    <div class="mr-4 w-8 h-8"></div>
</div>