Свойство 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

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии