Rows with Flexbox · Строки с помощью Flexbox
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Эта страница требует современного браузера (с поддержкой SharedArrayBuffer). Пожалуйста, обновите Chrome, Edge, Firefox или Safari до последней версии.
English
Putting boxes in a row
- By default, boxes stack downward. Often you want them side by side.
- Flexbox is the easy way to do that.
- Put
display: flex;on the container — the box that holds the others — and its children line up in a row.
Русский
Размещение блоков в ряд
- По умолчанию блоки выстраиваются вниз. Обычно вы хотите разместить их рядом.
- Flexbox — простой способ сделать это.
- Примените
display: flex;к контейнеру — блоку, содержащему остальные, и его дочерние элементы выстроятся в ряд.
English
Spacing them out
- Once a box is
display: flex;, you control how its children spread. justify-content: space-between;pushes them apart, with gaps between.gap: 12px;adds an even space between every child.
Русский
Распределение элементов
- Как только блок установлен в
display: flex;, вы контролируете, как распределяются его дочерние элементы. justify-content: space-between;раздвигает их, создавая промежутки между ними.gap: 12px;добавляет равное расстояние между каждым дочерним элементом.
<style>
.bar { display: flex; justify-content: space-between; }
.btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
<span class="btn">Home</span>
<span class="btn">About</span>
<span class="btn">Contact</span>
</div>
English
Common mistakes
display: flexgoes on the container, not on the items.justify-contentspaces items along the row.
Русский
Распространенные ошибки
display: flexприменяется к контейнеру, а не к элементам.justify-contentраспределяет элементы вдоль ряда.
English
Now you try
display: flexgoes on the container, not the items.- Turn a box into a row, then spread its children out.
Русский
Теперь попробуйте сами
display: flexприменяется к контейнеру, а не к элементам.- Превратите блок в ряд, затем распределите его дочерние элементы.
Explore · Исследовать
Flexbox lays out a row · Flexbox arranging a row
justify-content spaces items along the row; align-items across it. · justify-content распределяет элементы вдоль строки; align-items — поперек нее.
Put the three boxes side by side. Add display: flex; to the .row rule. · Расположите три блока рядом. Добавьте display: flex; в правило .row.
Spread the boxes evenly across the row. Add justify-content: space-between; to the .row rule. · Равномерно распределите ячейки по строке. Добавьте justify-content: space-between; к правилу .row.