is it efficent to use spacer in flexbox

July 16, 2023

I have 4 div’s and i want two of these left of the container and other two on the right.

i manage to do it with like this do you think is that a good aproach in tailwind-css or in general?

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>

>Solution :

(Disclaimer: I am not a Tailwind user, so I don’t know if using spacer elements is idiomatic in Tailwind or not – but if this were my own project I’d avoid them: simpler HTML with fewer moving-parts is more maintainable, imo)

You don’t need any placeholder elements in your HTML – you can use CSS’s flexbox’s built-in support for customizing element location and spacing using margin: auto, like so:

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

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

div.flex > *:nth-child(2) {
    margin-right: auto;
}
div.flex > *:nth-child(3) {
    margin-left: auto;
}

<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"></div>
    <div class="mr-4 w-8 h-8"></div>
</div>

An alternative approach is to use two child flex containers, with the grandparent flex container having justify-content: space-between;:

Also, instead of using explicit margins via .ml-4 and .mr-4 (which set margin-left/right: 1rem; respectively) consider just using gap: 1rem;:

div#grandparent {
    background-color: #eee;
    outline: 1px solid #999;

    justify-content: space-between;
    padding: 1rem;
}
div#grandparent > div.flex {
    background-color: #ddd;

    flex-shrink: 1;
    gap: 1rem;
}
div#grandparent > 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" id="grandparent">
    <div class="flex">
        <div class="w-8 h-8"></div>
        <div class="w-8 h-8"></div>
    </div>
    <div class="flex">
        <div class="w-8 h-8"></div>
        <div class="w-8 h-8"></div>
    </div>
</div>