Using gap inside flexbox is a simple
solution to give you uniform spacing between elements. Previously I
would use margin on all elements except for
first-child
or last-child, which was a clunky solution. The gap
property was originally introduced for CSS Grids but it has been
brought over for Flexbox support since 2021 (see sources).
<section>
<div class="card">Dog</div>
<div class="card">Cat</div>
<div class="card">Chicken</div>
<div class="card">Cow</div>
</section>
<style>
section {
border: 1px solid black;
display: inline-flex;
flex-direction: column;
gap: 1rem;
}
.card {
background: pink;
width: 400px;
max-width: 50vw;
height: 50px;
}
</style>