Коротко: «расположить горизонтально» — значит поставить элементы в ряд (по оси X). Основные способы: display: flex с flex-direction: row (по умолчанию), display: grid с колонками, display: inline-block и «старый» способ float. Сегодня первым делом берут flex.
Вкладки: 4 способа выстроить в ряд
.row {
display: flex;
flex-direction: row; /* по умолчанию и так row */
gap: 16px; /* расстояние между элементами */
align-items: center; /* выравнивание по вертикали */
}Главный способ. flex-direction: row ставит элементы в строку; gap задаёт промежутки без хитростей. Чтобы элементы не сжимались — flex-shrink: 0.
.row {
display: grid;
grid-auto-flow: column; /* элементы в колонки (в ряд) */
gap: 16px;
}Или задайте фиксированные колонки: grid-template-columns: repeat(3, 1fr). Grid удобен, когда нужна строгая сетка, а не «сколько влезет».
.item {
display: inline-block;
width: 200px;
vertical-align: top;
}Самый простой приём без flex. Минус — между блоками появляется «пробел» из переносов в HTML. Убирают его через комментарии или font-size: 0 у родителя. Сейчас способ используют редко.
.item { float: left; width: 33.33%; }
.row::after { content: ""; display: table; clear: both; }Устаревший способ. Требует «очистки» (clearfix), иначе родитель «схлопывается». Нужен для поддержки древних браузеров — в новых проектах не используется.
Практика: три задачи
1. Горизонтальное меню
nav ul { display: flex; gap: 24px; list-style: none; padding: 0; }
nav a { text-decoration: none; }2. Иконка слева, текст справа
.feature { display: flex; align-items: center; gap: 12px; }3. Кнопки в ряд с переносом на узком экране
.actions {
display: flex;
flex-wrap: wrap; /* разрешаем перенос */
gap: 12px;
}Распространённая проблема: элементы «падают» вниз
Это нормальное поведение flex: если места мало, элементы сжимаются или переносятся. Управляют этим так:
| Задача | Свойство |
|---|---|
| Запретить перенос | flex-wrap: nowrap (по умолчанию) |
| Разрешить перенос | flex-wrap: wrap |
| Запретить сжатие | flex-shrink: 0 |
| Равномерно распределить | justify-content: space-between |
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Элементы в столбик | flex-direction: column |
убрать или задать row |
| Пробелы между inline-block | переносы строк в HTML | flex с gap |
| Родитель «схлопнулся» | float без очистки | clearfix или flex |
| Появился скролл вбок | элементы не сжимаются | flex-wrap: wrap |
Проверьте себя
Вопросы и ответы
Задайте контейнеру overflow-x: auto и flex-wrap: nowrap. Элементы встанут в ряд, а контейнер будет прокручиваться. Это приём для «карусели» без библиотек.
Задайте ему margin-left: auto внутри flex-контейнера — он «оттолкнётся» вправо.
Если карточки должны быть одинаковой ширины и строго по колонкам — grid. Если ширина разная (nav, теги, иконки с текстом) — flex.
У flex-элементов по умолчанию flex-shrink: 1. Чтобы запретить сжатие — поставьте flex-shrink: 0 или flex: none.
Итоги
- Для ряда элементов —
display: flex(по умолчанию строка). - Промежутки —
gap, выравнивание —align-items. - Перенос включается
flex-wrap: wrap, запрет —nowrap. - float устарел, inline-block даёт лишние пробелы.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.