Как выровнять все элементы контейнера с помощью flexbox?

У меня есть контейнер, в котором есть 5 тегов nav (элементов)

<div id="container">
    <nav id="elem">Example 1</nav>
    <nav id="elem">Example 2</nav>
    <nav id="elem">Example 3</nav>
    <nav id="elem">Example 4</nav>
    <nav id="elem">Example 5</nav>
</div>

И мне нужно чтобы они были в строку, и я мог ими управлять с помощью flexbox'а.


Ответы (1 шт):

Автор решения: Михаил Камахин

Управляйте:

.flex__container {
  display: flex;
  justify-content: space-between;;
}
<div class="flex__container">
    <nav class="flex__item">Example 1</nav>
    <nav class="flex__item">Example 2</nav>
    <nav class="flex__item">Example 3</nav>
    <nav class="flex__item">Example 4</nav>
    <nav class="flex__item">Example 5</nav>
</div>

→ Ссылка