0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>При использовании флекс-контейнера элементы стараются вместиться в него без переноса строки. При этом элементы внутри контейнера ведут себя примерно как строчные элементы - занимают только то пространство, которое им необходимо.</p>
1
<p>При использовании флекс-контейнера элементы стараются вместиться в него без переноса строки. При этом элементы внутри контейнера ведут себя примерно как строчные элементы - занимают только то пространство, которое им необходимо.</p>
2
<p><a>Codepen</a></p>
2
<p><a>Codepen</a></p>
3
<p>Что же произойдет, если элементам внутри контейнера не хватит места? По логике контейнера элементы обязаны располагаться в одну строку, если не указано другое. Поэтому элементы внутри просто начнут выходить за пределы контейнера, но останутся в одной строке. Это может быть немного неочевидно, но такое поведение частенько помогает сверстать макет, например, эта особенность пригодится при верстке слайдеров.</p>
3
<p>Что же произойдет, если элементам внутри контейнера не хватит места? По логике контейнера элементы обязаны располагаться в одну строку, если не указано другое. Поэтому элементы внутри просто начнут выходить за пределы контейнера, но останутся в одной строке. Это может быть немного неочевидно, но такое поведение частенько помогает сверстать макет, например, эта особенность пригодится при верстке слайдеров.</p>
4
<p><a>Codepen</a></p>
4
<p><a>Codepen</a></p>
5
<p>Добавим отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство<strong>flex-wrap</strong>, которое говорит контейнеру переносить дочерние элементы при нехватке места.</p>
5
<p>Добавим отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство<strong>flex-wrap</strong>, которое говорит контейнеру переносить дочерние элементы при нехватке места.</p>
6
<p>Свойство<strong>flex-wrap</strong>может принимать одно из трех значений:</p>
6
<p>Свойство<strong>flex-wrap</strong>может принимать одно из трех значений:</p>
7
<ul><li><strong>nowrap</strong>. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.</li>
7
<ul><li><strong>nowrap</strong>. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.</li>
8
<li><strong>wrap</strong>. Данное значение говорит перенести элементы внутри контейнера при нехватке места.</li>
8
<li><strong>wrap</strong>. Данное значение говорит перенести элементы внутри контейнера при нехватке места.</li>
9
</ul><p><a>Codepen</a></p>
9
</ul><p><a>Codepen</a></p>
10
<ul><li><strong>wrap-reverse</strong>. То же самое, что и<strong>wrap</strong>, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями<em>1</em>и<em>2</em>окажется ниже, в отличие от ситуации с использованием простого<strong>wrap</strong></li>
10
<ul><li><strong>wrap-reverse</strong>. То же самое, что и<strong>wrap</strong>, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями<em>1</em>и<em>2</em>окажется ниже, в отличие от ситуации с использованием простого<strong>wrap</strong></li>
11
</ul><p><a>Codepen</a></p>
11
</ul><p><a>Codepen</a></p>
12
<p>Использование<strong>flex-wrap</strong>- отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.</p>
12
<p>Использование<strong>flex-wrap</strong>- отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.</p>
13
<h3>Документация</h3>
13
<h3>Документация</h3>
14
<ul><li><a>flex-wrap</a></li>
14
<ul><li><a>flex-wrap</a></li>
15
</ul>
15
</ul>