Выравнивание
У самой навигации три видимых дочерних элемента: логотип, список ссылок и кнопка «Поддержать». (Скрытая кнопка «Меню» не в счёт: элемент с display: none вообще не участвует в раскладке.) Поставим их в ряд: логотип слева, кнопка справа.
Как вы знаете из курса CSS, элементы распределяются вдоль главной оси свойством justify-content, а по поперечной оси располагаются свойством align-items. У их значений тоже есть классы: justify-* для justify-content и items-* для align-items. Названия короче значений, потому что Tailwind опускает слова flex- и space-:
| Класс | CSS |
|---|---|
justify-start | justify-content: flex-start; |
justify-center | justify-content: center; |
justify-end | justify-content: flex-end; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
items-stretch | align-items: stretch; |
items-start | align-items: flex-start; |
items-center | align-items: center; |
items-end | align-items: flex-end; |
items-baseline | align-items: baseline; |
Без этих классов flex-контейнер ведёт себя так, как с justify-start и items-stretch, как и в CSS.
Задание
- 1
Добавьте элементу
navклассflex. Логотип, ссылки и кнопка «Поддержать» встанут рядом. А внутренний отступ кнопки теперь занимает место: как flex-элемент, ссылка выкладывается как блок. - 2
Добавьте класс
justify-between. Логотип останется слева, кнопка уйдёт к правому краю, а ссылки окажутся между ними, с одинаковым пространством по обе стороны. - 3
Логотип, ссылки и кнопка растянуты до высоты самого высокого из них, кнопки, а их текст остаётся вверху. Поэтому ссылки стоят чуть выше, чем текст кнопки. Добавьте класс
items-center, и всё выровняется по центру по вертикали.