Свойство flex-wrap
Определяет возможность переносить элементы контейнера flexbox на новую строку
flex-wrap: wrap;
Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
flex-wrap: nowrap;
Не разрешает перенос элементов на новую строку. Элементы будут сжаты, если не помещаются в строку и если их сжатие разрешено
<style>
.example-1 {
display: flex;
flex-wrap: nowrap;
width: 100%;
outline: 2px dashed #ccc;
}
.example-1-item {
width: 40%;
height: 100px;
background: #1a76ff;
margin: 2px;
}
</style>
<div class="example-1">
<div class="example-1-item"></div>
<div class="example-1-item"></div>
<div class="example-1-item"></div>
</div>
flex-wrap: wrap;
Разрешает перенос элементов на новую строку, если они не помещаются в текущей строке. Новая строка будет добавлена после предыдущей строки
<style>
.example-2 {
display: flex;
flex-wrap: wrap;
width: 100%;
outline: 2px dashed #ccc;
}
.example-2-item {
width: 40%;
height: 100px;
background: #1a76ff;
margin: 2px;
}
</style>
<div class="example-2">
<div class="example-2-item">1</div>
<div class="example-2-item">2</div>
<div class="example-2-item">3</div>
</div>
1
2
3
flex-wrap: wrap-reverse;
Разрешает перенос элементов на новую строку, если они не помещаются в текущей строке. Новая строка будет добавлена перед предыдущей строкой
<style>
.example-3 {
display: flex;
flex-wrap: wrap-reverse;
width: 100%;
outline: 2px dashed #ccc;
}
.example-3-item {
width: 40%;
height: 100px;
background: #1a76ff;
margin: 2px;
}
</style>
<div class="example-3">
<div class="example-3-item">1</div>
<div class="example-3-item">2</div>
<div class="example-3-item">3</div>
</div>
1
2
3