Свойство flex-wrap
Описание
Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.
Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
Синтаксис
flex-wrap: nowrap | wrap | wrap-reverse;Подробности
| Значение | Описание |
| nowrap | Флексы выстраиваются в одну линию. |
| wrap | Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction. |
| wrap-reverse | Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.flex-item {
padding: 20px;
background: #f0f0f0;
border-radius: 5px;
margin: 1rem;
text-align: center;
}
.flex-item > img {
width: 200px;
}
</style>
<ul class='flex-container'>
<li class='flex-item'>
<img src='https://mfs.gki-webik.ru/s?path=/images/regular/body-img.jpg' alt='' />
</li>
<li class='flex-item'>
<img src='https://mfs.gki-webik.ru/s?path=/images/regular/fon10.jpg' alt='' />
</li>
<li class='flex-item'>
<img src='https://mfs.gki-webik.ru/s?path=/images/regular/lion5.jpeg' alt='' />
</li>
</ul>
</body>
</html>Читайте также
Свойство text-emphasis-position
Устанавливает положение маркеров, отображаемых с помощью свойства text-emphasis-style....
Свойство backface-visibility
Определяет, показывать обратную сторону элемента или нет. Как правило, обратная сторона становится видна при трансформации элемента, например, при его...
Селекторы атрибутов
Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно....
Свойство transition-duration
Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, чт...