Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 24 из 53 · 10 мин
display: flex, направление, перенос и промежутки gap.
Пункты меню — в одну строку, с равными промежутками.
Скажи контейнеру display: flex — и я выстрою детей вдоль оси. По умолчанию — в ряд.
display: flex<style>
.row { display: flex; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div></div>flex-directionrow, column, row-reverse, column-reverse.<style>
.col { display: flex; flex-direction: column; gap: 4px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="col"><div>Пенал</div><div>Ручка</div><div>Блокнот</div></div>flex-wrapnowrap (по умолчанию) или wrap — переносить на новую строку.<style>
.row { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div><div>Линейка</div><div>Ластик</div></div>flex-flowflex-flow: row wrap — направление и перенос вместе.<style>
.row { display: flex; flex-flow: row wrap; gap: 6px; width: 200px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div><div>Линейка</div></div>gap<style>
.row { display: flex; gap: 16px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div></div>row-gap<style>
.row { display: flex; flex-wrap: wrap; row-gap: 16px; column-gap: 4px; width: 200px; } div > div { background: #fdf6ec; border: 1px solid #c8763a; padding: 6px 10px; }
</style>
<div class="row"><div>Пенал</div><div>Ручка</div><div>Блокнот</div><div>Линейка</div></div>column-gapРяд элементов, меню, кнопки рядом — это флекс. Отступы между ними — gap, а не margin.
Сделай nav ul флекс-контейнером с промежутком 24px и убери маркеры (list-style: none).
Выберите один ответ.
Как поставить флекс-элементы в колонку?
Выберите один ответ.
Чем gap лучше margin для промежутков во флексе?
Проверяем состояние обучения…