CSS: Flex - Jak wyświetlić elementy po lewej i prawej stronie?

Przykład znajdziesz pod tym linkiem.

Poniżej kod:

HTML:

<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
    <div class="box">E</div>
    <div class="box">F</div>
</div>

CSS:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    height: 200px;
    width: 600px;
    margin: 0 auto;
    border: 1px solid black;
}

.box {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 1px solid black;
    background: blue;
    color: white;
    margin-bottom: 0.5em;
}

Sercem tego efektu są reguły CSS dla klasy container. Szczególnie pierwsze pięć linijek. Ważne jest także ustawienie odpowiedniej wysokości.