Flex wrap: flex-wrap — CSS | MDN

Leave a Comment / Разное / By /

Содержание

flex-wrap — CSS | MDN

Свойство CSS flex-wrap задаёт правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;


flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

Подробнее по свойствам и общей информации смотрите Using CSS flexible boxes.

Свойство flex-wrap может содержать одно из следующих ниже значений.

Значения

Допускаются следующие значения:

nowrap
Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction.
wrap
Расположение в несколько линий. Свойство cross-start эквивалентно 
start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.
wrap-reverse
Ведёт себя так же, как и wrap но cross-start и cross-end инвертированы.

Formal syntax

nowrap | (en-US) wrap | (en-US) wrap-reverse

HTML

<h5>This is an example for flex-wrap:wrap </h5>
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<h5>This is an example for flex-wrap:nowrap </h5>
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<h5>This is an example for flex-wrap:wrap-reverse </h5>
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS

 
.content,
.content1,
.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}


.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

Results

BCD tables only load in the browser

flex-wrap | CSS | WebReference

Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Краткая информация

Значение по умолчаниюnowrap
НаследуетсяНет
ПрименяетсяК флекс-контейнеру
АнимируетсяНет

Синтаксис 

flex-wrap: nowrap | wrap | wrap-reverse

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

nowrap
Флексы выстраиваются в одну линию.
wrap
Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.
wrap-reverse
Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>flex-wrap</title> <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; } </style> </head> <body> <ul> <li><img src=»image/aquaria1.jpg» alt=»»></li> <li><img src=»image/aquaria2.jpg» alt=»»></li> <li><img src=»image/aquaria3.jpg» alt=»»></li> </ul> </body> </html>

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-wrap.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

Свойство flex-wrap | CSS справочник

CSS свойства

Определение и применение

CSS свойство flex-wrap определяет, будет ли флекс контейнер однострочным, или многострочным. По умолчанию контейнер является однострочным, для многострочных контейнеров допускается контролировать направление, в котором размещаются флекс элементы.

Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-wrap не окажет на такой элемент никакого эффекта.

Схематичное отображение работы свойства flex-wrap отображено на следующем изображении:

Поддержка браузерами

CSS синтаксис:

flex-wrap: "nowrap | wrap | wrap-reverse | initial | inherit";

JavaScript синтаксис:

object.style.flexWrap = "wrap-reverse"

Значения свойства

ЗначениеОписание
nowrapУказывает, что флекс элементы выстраиваются в одну строку. Это значение по умолчанию.
wrapУказывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения). Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr), а при значении rtl размещаются справа налево.
wrap-reverseУказывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap, но формирование строк идёт в обратном порядке.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS 3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Однострочные и многострочные флекс контейнеры</title>
<style> 
.container {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-flex-wrap: nowrap;  /* для поддержки ранних версий браузеров */
flex-wrap: nowrap;  /* указывает, что флекс элементы выстраиваются в одну строку(это значение по умолчанию) */
}
.container2 {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-flex-wrap: wrap;  /* для поддержки ранних версий браузеров */
flex-wrap: wrap;  /* указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) */
} 
.container3
  {
display: -webkit-flex;  /* для поддержки ранних версий браузеров */
display: flex;  /* элемент отображается как блочный flex-контейнер */
-webkit-flex-wrap: wrap-reverse;  /* для поддержки ранних версий браузеров */
flex-wrap: wrap-reverse;  /* по аналогии со значением wrap, но формирование строки идёт в обратном порядке */
} 
div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
width: 40%; /* устанавливаем ширину блока */
height: 25px;  /* устанавливаем высоту блока */
border: 1px solid orange;  /* устанавливаем сплошную границу 1px оранжевого цвета */
} 
</style>
</head>
	<body>
		<h4>flex-wrap:nowrap;</h4>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h4>flex-wrap:wrap;</h4>
		<div class = "container2">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h4>flex-wrap:wrap-reverse;</h4>
		<div class = "container3">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
	</body>
</html>

Результат примера:

Пример использования CSS свойства flex-wrap (однострочные и многострочные флекс контейнеры).CSS свойства

wrap | HTML и CSS с примерами кода

Свойство flex-wrap указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.

Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Flexbox и выравнивание

Синтаксис

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

Значения

Значение по-умолчанию: nowrap

Наследуется: нет

Применяется к флекс-элементам

Анимируется: нет

nowrap
Флексы выстраиваются в одну линию.
wrap
Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.
wrap-reverse
Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-wrap.

Спецификации

Поддержка браузерами

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>flex-wrap</title>
    <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;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <img src="/css/aquaria1.jpg" alt="" />
      </li>
      <li>
        <img src="/css/aquaria2.jpg" alt="" />
      </li>
      <li>
        <img src="/css/aquaria3.jpg" alt="" />
      </li>
    </ul>
  </body>
</html>

Результат:

См. также

Свойство flex-wrap — многострочная расстановка блоков по главной оси

Свойство flex-wrap задает многострочную расстановку блоков по главной оси.

Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение flex-flow.

Синтаксис

селектор { flex-wrap: nowrap | wrap | wrap-reverse; }

Значения

ЗначениеОписание
nowrapОднострочный режим — блоки выстраиваются в одну строку.
wrapБлоки выстраиваются в несколько строк, если не помещаются в одну.
wrap-reverse То же самое, что и wrap, но блоки выстраиваются в другом порядке (сначала последний, потом первый).

Значение по умолчанию: nowrap.

Пример . Значение wrap

Сейчас блоки не помещаются в свой контейнер и выстроятся в несколько строк:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение wrap-reverse

А теперь порядок следования поменяется на обратный (смотрите на цифры внутри блоков):

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: wrap-reverse; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение nowrap

Сейчас блоки будут располагаться в однострочном режиме (так по умолчанию). При этом значение ширины width для блоков будет проигнорировано, если оно мешает блокам помещаться в родителя. Обратите внимание на то, что блоки поместились в родителя, но их реальная ширина не 100px, как им задано, а меньше:

<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> #parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Пример . Значение nowrap

Однако, если блоки помещаются при заданной им ширине — то свойство width не будет проигнорировано. Уменьшим количество блоков так, чтобы они все влезли:

<div> <div>1</div> <div>2</div> <div>3</div> </div> #parent { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; } #parent > div { width: 100px; height: 50px; border: 1px solid #696989; }

:

Смотрите также

  • свойство flex-direction,
    которое задает направление осей flex блоков
  • свойство justify-content,
    которое задает выравнивание по главной оси
  • свойство align-items,
    которое задает выравнивание по поперечной оси
  • свойство flex-wrap,
    которое многострочность flex блоков
  • свойство flex-flow,
    сокращение для flex-direction и flex-wrap
  • свойство order,
    которое задает порядок flex блоков
  • свойство align-self,
    которое задает выравнивание одного блока
  • свойство flex-basis,
    которое задает размер конкретного flex блока
  • свойство flex-grow,
    которое задает жадность flex блоков
  • свойство flex-shrink,
    которое задает сжимаемость flex блоков
  • свойство flex,
    сокращение для flex-grow, flex-shrink и flex-basis

Шпаргалка по Flexbox CSS | Типичный верстальщик

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start
Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.
flex-end
Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.
center
Строки располагаются по центру контейнера.
space-between
Строки равномерно распределяются в контейнере и расстояние между ними одинаково.
space-around
Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
space-evenly
Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк.
stretch
Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start
Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.
flex-end
Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.
center
Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)
space-between
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same.
space-around
Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
space-evenly
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same.
stretch
Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

flex-wrap | CSS справочник

Поддержка браузерами

11.0+ 28.0+ 29.0+ 17.0+ 9.0+

Описание

CSS свойство flex-wrap определяет будут ли flex-элементы выстраиваться в одну строку или возможно многострочное размещение. Если многострочное расположение разрешено, то свойство позволяет задавать и направление расположения flex-элементов.

Примечание: если элемент не является flex-контейнером (display: flex), свойство flex-wrap будет проигнорировано.

Значение по умолчанию: nowrap
Применяется: к flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.flexWrap=»nowrap»;

Синтаксис

flex-wrap: nowrap|wrap|wrap-reverse;

Значения свойства

Значение Описание
nowrap Значение по умолчанию. Все flex-элементы располагаются на одной строке.
wrap Указывает, что flex-элементы при необходимости могут переноситься на следующую строку, если на предыдущей не хватает места.
wrap-reverse Указывает, что flex-элементы при необходимости могут переноситься на следующую строку, если на предыдущей не хватает места. Дополнительно flex-элементы начинают располагать снизу вверх, то есть если на нижней строке не хватает места, они переносятся на строку выше.

Пример

#main {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-wrap: nowrap;
}

гибкая пленка | CSS-уловки

Свойство flex-wrap является подсвойством модуля «Гибкая компоновка блока».

Он определяет, будут ли гибкие элементы размещаться в одной строке или могут быть объединены в несколько строк. Если установлено несколько линий, он также определяет поперечную ось, которая определяет направление, в котором укладываются новые линии.

Напоминание: поперечная ось — это ось, перпендикулярная главной оси. Его направление зависит от направления главной оси.

Свойство flex-wrap принимает 3 разных значения:

  • nowrap ( по умолчанию ): однострочный, который может вызвать переполнение контейнера
  • wrap : многострочный, направление определяется flex-direction
  • wrap-reverse : многострочный, противоположный направлению, заданному flex-direction

Синтаксис 

  гибкая пленка: nowrap | упаковка | обертка-реверс

.flex-container {
  flex-wrap: обертка;
}

Демо

В следующей демонстрации:

  • Красный список установлен на nowrap
  • Желтый список установлен на wrap
  • Для синего списка установлено значение с перемоткой назад

Примечание: для flex-direction установлено значение по умолчанию: строка .

См. Демонстрацию Pen Flex-wrap: CSS-Tricks (@ css-tricks) на CodePen.

Сопутствующие объекты

Другие ресурсы

Поддержка браузера

Desktop
Chrome Firefox IE Edge Safari
21 * 28 11 12 6,1 *
Mobile / Tablet
Android Chrome Android Firefox Android iOS Safari
91 89 4.4 7,0-7,1 *

Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).

Flex Wrap — Tailwind CSS

Don’t wrap

Используйте flex-nowrap для предотвращения упаковки гибких элементов, в результате чего негибкие элементы при необходимости переполняют контейнер:

  

  
 1 

  
 2 

  
 3

Обычная упаковка

Используйте flex-wrap , чтобы можно было обернуть гибкие элементы:

  

  
 1 

  
 2 

  
 3

Обертка в обратном направлении

Используйте flex-wrap-reverse , чтобы обернуть гибкие элементы в обратном направлении:

  

  
 1 

  
 2 

  
 3

Отзывчивый

Чтобы управлять переносом гибких элементов в определенную точку останова, добавьте префикс {screen}: к любому существующему служебному классу.Например, используйте md: flex-wrap-reverse , чтобы применить утилиту flex-wrap-reverse только для средних размеров экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией по адаптивному дизайну.

Настройка

Варианты

По умолчанию для утилит flex-wrap генерируются только адаптивные варианты.

Вы можете контролировать, какие варианты генерируются для утилит flex-wrap, изменив свойство flexWrap в разделе вариантов вашего попутного ветра .config.js файл.

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ flexWrap: ['hover', 'focus'],
      }
    }
  }

Если вы не планируете использовать утилиты flex-wrap в своем проекте, вы можете полностью отключить их, установив для свойства flexWrap значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ flexWrap: ложь,
    }
  }

CSS | свойство flex-wrap — GeeksforGeeks

Свойство CSS flex-wrap используется, чтобы указать, должны ли гибкие элементы помещаться в одну строку или переноситься на несколько строк. Свойство flex-wrap позволяет включить направление управления, в котором линии укладываются. Он используется для обозначения однострочного или многострочного формата для гибких элементов внутри гибкого контейнера.

Синтаксис: 

 flex-wrap: nowrap | wrap | wrap-reverse | initial;

Значения свойств:

  • wrap: Это свойство используется для разбивки гибкого элемента на несколько строк.Он заставляет гибкие элементы переноситься на несколько строк в соответствии с шириной гибкого элемента.
    Синтаксис: 
     flex-wrap: wrap;

    Пример:



    < html >

    < < > title > flex-wrap property title >

    < style >

    #main {

    высота: 300 пикселей;

    граница: сплошной черный цвет 5 пикселей;

    дисплей: гибкий;

    flex-wrap: пленка;

    }

    #main div {

    width: 100px;

    высота: 50 пикселей;

    }

    h2 {

    цвет: # 009900;

    font-size: 42px;

    левое поле: 50 пикселей;

    }

    h4 {

    margin-top: -20px;

    левое поле: 50 пикселей;

    }

    стиль >

    головка >

    0003>

    0003 < h2 > GeeksforGeeks h2 >

    < h4 > Flex-wrap: wrap property h4> < div id = "main" >

    < div style = "background-color: # 009900;" > 1 div >

    < div style = "background-color: # 00cc99;" > 2 div >

    < div style = "background-color: # 0066ff;" > 3 div >

    < div style = "background-color: # 66ffff;" > 4 div >

    < div style = "background-color: # 660066;" > 5 div >

    < div style = "цвет фона: # 663300;" > 6 div >

    div >

    корпус > 000

    000

    Вывод:

  • nowrap: Значение wrap-flex по умолчанию - nowrap.Он используется, чтобы указать, что у элемента нет обертки. Это заставляет элемент переноситься в отдельные строки.
    Синтаксис: 
     flex-wrap: nowrap;

    Пример:

    < html >

    < < < > > > свойство flex-wrap title >

    < style >

    #main {

    width

    высота: 300 пикселей;

    граница: сплошной черный цвет 5 пикселей;

    дисплей: гибкий;

    гибкая пленка: nowrap;

    }

    #main div {

    width: 100px;

    высота: 50 пикселей;

    }

    h2 {

    цвет: # 009900;

    font-size: 42px;

    левое поле: 50 пикселей;

    }

    h4 {

    margin-top: -20px;

    левое поле: 50 пикселей;

    }

    стиль >

    голова >

    0003>

    0003 < h2 > GeeksforGeeks h2 >

    < h4 > Flex-wrap: nowrap property h4> h4 < div id = "main" >

    < div style = "background-color: # 009900;" > 1 div >

    < div style = "background-color: # 00cc99;" > 2 div >

    < div style = "background-color: # 0066ff;" > 3 div >

    < div style = "background-color: # 66ffff;" > 4 div >

    < div style = "background-color: # 660066;" > 5 div >

    < div style = "цвет фона: # 663300;" > 6 div >

    div >

    корпус > 000

    0003

    Вывод:

  • wrap-reverse: Это свойство используется для реверсирования потока гибких элементов, когда они переносятся на новые строки.
    Синтаксис: 
     flex-wrap: wrap-reverse;

    Пример:

    < html >

    < < < > > > свойство flex-wrap title >

    < style >

    #main {

    width

    высота: 300 пикселей;

    граница: сплошной черный цвет 5 пикселей;

    дисплей: гибкий;

    гибкая пленка: обратная пленка;

    }

    #main div {

    width: 100px;

    высота: 50 пикселей;

    }

    h2 {

    цвет: # 009900;

    font-size: 42px;

    левое поле: 50 пикселей;

    }

    h4 {

    margin-top: -20px;

    левое поле: 50 пикселей;

    }

    стиль >

    головка >

    0003>

    0003 < h2 > GeeksforGeeks h2 >

    < h4 > Flex-wrap: свойство оборачивания-реверса 0003> h4 < div id = "main" >

    < div style = 9000 003 "цвет фона:" > 1 div >

    < div style = "background-color: # 00cc99;" > 2 div >

    < div style = "background-color: # 0066ff;" > 3 div >

    < div style = "background-color: # 66ffff;" > 4 div >

    < div style = "background-color: # 660066;" > 5 div >

    < div style = "цвет фона: # 663300;" > 6 div >

    div >

    корпус > 000

    0003

    Вывод:

  • начальный: Это свойство используется для установки значения по умолчанию.
    Синтаксис: 
     flex-wrap: initial;

    Пример:

    < html >

    < < < > > > свойство flex-wrap title >

    < style >

    #main {

    width

    высота: 300 пикселей;

    граница: сплошной черный цвет 5 пикселей;

    дисплей: гибкий;

    flex-wrap: начальный;

    }

    #main div {

    width: 100px;

    высота: 50 пикселей;

    }

    h2 {

    цвет: # 009900;

    font-size: 42px;

    левое поле: 50 пикселей;

    }

    h4 {

    margin-top: -20px;

    левое поле: 50 пикселей;

    }

    стиль >

    головка >

    0003>

    0003 < h2 > GeeksforGeeks h2 >

    < h4 > Flex-wrap: начальная собственность h4 < div id = "main" >

    < div style = "background-color: # 009900;" > 1 div >

    < div style = "background-color: # 00cc99;" > 2 div >

    < div style = "background-color: # 0066ff;" > 3 div >

    < div style = "background-color: # 66ffff;" > 4 div >

    < div style = "background-color: # 660066;" > 5 div >

    < div style = "цвет фона: # 663300;" > 6 div >

    div >

    корпус > 000

    0003

    Вывод:

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством CSS flex-wrap , перечислены ниже:

  • Google Chrome 29.0, 21.0 -webkit-
  • Internet Explorer 11.0
  • Firefox 28.0, 18.0 -moz-
  • Opera 17.0
  • Safari 9.0, 6.0 -webkit-

Вниманию читателей! Не прекращайте учиться сейчас. Получите все важные концепции конкурентного программирования с помощью веб-дизайна для начинающих | HTML курс.


Оберните свой мозг вокруг Flex-Wrap

flex-wrap - это ловушка Flexbox №4. См. Полный список подводных камней Flexbox и способы их избежать.

Как только вы думаете, что начинаете разбираться в flexbox, вы попадаете в ситуацию, когда вам не хватает места в одной строке для всех ваших гибких элементов. Нет проблем, гибкие элементы можно оборачивать! Вы добавляете flex-wrap: wrap; и наблюдайте, как ваша драгоценная уверенность в Flexbox рассыпается дотла. Но не волнуйтесь - есть всего пара вещей, которые нужно знать о flex-wrap (и одно, чего следует полностью избегать), и вы снова почувствуете себя потрясающе гибкими.

Первая проблема с flex-wrap заключается в том, что гибкие элементы начнут оборачиваться только в том случае, если их общая сумма flex-base на больше, чем размер гибкого контейнера.Итак, чтобы понять, как работает flex-wrap , вам также необходимо хорошо разбираться в flex-base , у которого есть много собственных нюансов. Например, flex-base возвращается к ширине , если не определено. Также flex-base ограничен минимальной шириной элемента и максимальной шириной , что влияет на его "окончательное" значение flex-base . См. Раздел «Разница между шириной» и «Flex-Basis», чтобы полностью понять это свойство. Если ваши гибкие элементы не упаковываются так, как вы ожидаете, это из-за гибкости .

Flexbox Zombies, глава 7 подробно рассматривает flex-base .

По умолчанию элементы гибкости сжимаются, как только их общее накопленное значение на основе гибкости становится меньше, чем размер их родительского гибкого контейнера. В этом примере размер нашего контейнера 400px , а общая сумма всех наших окончательных значений flex-base составляет 800px ( 4 200px ). Поскольку эта сумма ( 800 пикселей, ) больше, чем размер контейнера ( 400 пикселей, ), гибкие элементы сжимаются *, чтобы соответствовать.

 .container {
  дисплей: гибкий;
  ширина: 400 пикселей;
}

.пункт {
  высота: 200 пикселей;
  / * элементы уже сжались * /
  гибкая основа: 200 пикселей;
}

Но как только вы сообщаете своему контейнеру flex-wrap , упаковка становится более приоритетной, чем сжатие. Помните об этой формуле:

продолжайте переносить на новые строки, пока каждый гибкий элемент не будет иметь свою собственную строку, затем начинайте сжимать элементы, когда их гибкая основа больше, чем размер контейнера.

Обратите внимание, что в этом примере, поскольку мы упаковываем, элементы еще даже не начали сжиматься, потому что они просто продолжают упаковывать, чтобы получить свою собственную линию, а их гибкая основа ( 200px ) все еще ниже контейнера размер ( 250px ).

 .container {
  дисплей: гибкий;
  flex-wrap: обертка;
  ширина: 250 пикселей;
}

.пункт {
  высота: 200 пикселей;
  / * элементы еще не начали уменьшаться * /
  гибкая основа: 200 пикселей;
}

Но как только у каждого элемента будет своя собственная строка и размер контейнера будет меньше, чем у элемента flex-base , элемент уменьшится:

 .container {
  дисплей: гибкий;
  flex-wrap: обертка;
  ширина: 100 пикселей;
}

.пункт {
  высота: 200 пикселей;
  / * элементы еще не начали уменьшаться * /
  гибкая основа: 200 пикселей;
}

flex-wrap также влияет на рост гибких элементов.По умолчанию, если у вас есть элементы, настроенные на рост ( flex-grow: 1 ), они будут расти на одной строке всякий раз, когда есть свободное место. В этом примере сумма flex-base составляет 400 пикселей ( 2 * 200 пикселей ), а размер контейнера - 500 пикселей . Таким образом, элементы увеличиваются до , чтобы заполнить дополнительное пространство:

 .container {
  дисплей: гибкий;
  ширина: 500 пикселей;
}

.пункт {
  высота: 200 пикселей;
  гибкая основа: 200 пикселей;
  flex-grow: 1;
}

Но когда вы используете упаковку, элементы рассматривают строку, в которой они находятся, как единственное, что имеет значение, и будут расти, чтобы заполнить любое свободное пространство в своей собственной строке .

В этом примере есть три элемента на 200px flex-base каждый, внутри контейнера шириной 500px . Для них не хватает места, поэтому последний элемент переходит в новую строку. Затем он рассматривает эту линию как свою собственную и растет, чтобы заполнить все пространство внутри нее. Остальные два элемента в исходной строке также немного увеличиваются, чтобы разделить вновь созданное 100 пикселей свободного места в первой строке.

 .container {
  дисплей: гибкий;
  ширина: 500 пикселей;
  flex-wrap: обертка;
}

.элемент {
  высота: 150 пикселей;
  гибкая основа: 200 пикселей;
  flex-grow: 1;
}

Когда ваши гибкие элементы переносятся на новую строку, вам нужно научиться управлять расположением этих строк. Это и есть align-content . С его помощью вы можете делать такие классные вещи, как разносить строки между собой:

 .container {
  дисплей: гибкий;
  ширина: 200 пикселей;
  высота: 350 пикселей;
  flex-wrap: обертка;
  выровнять контент: пробел между;
}

.пункт {
  высота: 100 пикселей;
  гибкая основа: 100 пикселей;
}

Или соберите линии вместе в центре гибкого контейнера:

.container {
  дисплей: гибкий;
  ширина: 200 пикселей;
  высота: 350 пикселей;
  flex-wrap: обертка;
  выровнять контент: центр;
}

.пункт {
  высота: 100 пикселей;
  гибкая основа: 100 пикселей;
}

Посмотрите, как я использовал flex-wrap и align-content , чтобы сильно повлиять на сердца Линка в пользовательском интерфейсе Zelda:

Зомби Flexbox, глава 10 охватывает все параметры align-content в деталь.

Последняя ловушка flex-wrap , на которую следует обратить внимание, заключается в том, что flex-wrap: wrap-reverse придаст вашему мозгу должное умонастроение, от которого вы, возможно, никогда не оправитесь.Назначение этого значения - позволить изменить порядок строк в переносе. Обычно новые строки обтекания создаются после существующих строк, как во всех приведенных выше примерах. Это означает, что новые линии обычно отображаются на ниже при горизонтальной компоновке или на справа при вертикальной компоновке. Но установка flex-wrap: wrap-reverse меняет это так, что новые строки отображаются на раньше, чем на существующих строк. Над существующей линией (линиями) для горизонтальных макетов и слева от них для вертикальных макетов.

В этом примере синему элементу не хватило места для размещения на той же строке, поэтому он переместился в свою собственную строку. Но на этот раз из-за flex-wrap: wrap-reverse эта новая строка помещается на выше исходной строки.

 .container {
  дисплей: гибкий;
  ширина: 500 пикселей;
  flex-wrap: накрутка-реверс;
}

.пункт {
  высота: 150 пикселей;
  гибкая основа: 200 пикселей;
  flex-grow: 1;
}

Если бы это было все, что изменилось flex-wrap: wrap-reverse , это было бы неплохо.Но получи это. Он также меняет местами свойства align-items и align-self ! Даже если места достаточно, поэтому упаковка не требуется. Вверху вниз, вниз вверх, вправо влево, влево вправо.

Убедитесь сами: в приведенном ниже коде удалите flex-wrap: wrap-reverse; и наблюдайте, как ваш мир переворачивается вверх правильной стороной.

 .container {
  контур: сплошной черный цвет 5 пикселей;
  дисплей: гибкий;
  ширина: 500 пикселей;
  высота: 500 пикселей;
  flex-wrap: накрутка-реверс;
  / *
  обернуть-перевернуть сделанный гибкий конец
  будь в ТОПе!
  * /
  выровнять элементы: гибкий конец;
}

.элемент {
  высота: 100 пикселей;
  гибкая основа: 100 пикселей;
}

.фиолетовый {
  / *
  wrap-reverse made flex-start
  быть внизу!
  * /
  выровнять себя: гибкий старт;
}

flex-wrap: wrap-reverse проделывает тот же головокружительный трюк со свойством align-content - меняет ось выравнивания на противоположное - заставляя flex-end объединять линии с верхней контейнера, а не ко дну. Спасибо wrap-reverse !

 .container {
  дисплей: гибкий;
  ширина: 500 пикселей;
  высота: 400 пикселей;
  flex-wrap: накрутка-реверс;
  / *
  flex-wrap: обернуть-реверс
  сделал flex-end ТОП
  * /
  выровнять контент: гибкий конец;
}

.элемент {
  высота: 100 пикселей;
  гибкая основа: 100 пикселей;
}

Если вы какой-то сверхчеловеческий гений и можете придумать, как все исправить - «вражеские ворота опущены» или что-то в этом роде - тогда дерзайте. В противном случае следует избегать wrap-reverse . Сам пока не нашел применения. В большинстве случаев вы можете просто изменить исходный порядок элементов DOM, чтобы получить желаемый эффект. Даже если вы никогда не используете его сами, полезно знать, что он делает, если вы столкнетесь с ним в дикой природе.

Обучите свой мозг (посмотрите, что я там сделал ...) нюансами flex-wrap , получив некоторую практику: найдите интерфейс, который вам нравится, где flex-wrap будет хорошо подходить, и создайте его самостоятельно. Закрепите эти концепции в мышечной памяти, стреляя из арбалета в Flexbox Zombies, глава 9.

Повысьте скорость реакции с помощью flex-wrap в CSS

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение.Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, нажав кнопку «сообщить о проблеме» в нижней части руководства.

Введение

Свойство flex-wrap - это быстрый способ сделать родительские элементы более отзывчивыми на экранах разных размеров. Как и в случае с flexbox в целом, он упрощает макеты страниц, поэтому вам не нужно вручную устанавливать точки останова или самостоятельно управлять переполнением страницы.

Flexbox и упаковка управляющих элементов

flex-wrap - это свойство, специфичное для модуля flexbox (или «гибкого блока») в CSS.Flexbox - это модель макета CSS, которая управляет отображением дочерних элементов в родительском элементе. Это означает, что flexbox может быть полезен для общего макета страницы (например, заголовка, навигации, нижнего колонтитула и т. Д.). Что еще более важно, его можно применить к любому элементу на странице, имеющему дочерние элементы.

  div.parent {
  дисплей: гибкий;
}

Сделать элемент контейнером flex так же просто, как добавить display: flex; к его декларациям CSS.

Когда есть контейнер flex , можно объявить flex-wrap для того же родительского элемента, чтобы определить, как обрабатывать дочерние элементы, которые по умолчанию не помещаются в одну строку.

  div.parent {
  дисплей: гибкий;
  flex-wrap: обертка;
}

Родительский элемент должен быть преобразован в гибкий контейнер, прежде чем можно будет применить гибкую оболочку. Свойство flex-wrap применяется только к гибкому контейнеру (а не к дочерним элементам).

Настройка по умолчанию для гибкой пленки

По умолчанию контейнер flex пытается разместить свои дочерние элементы в одной строке. Это также известно как nowrap для свойства flex-wrap .

Для этого примера давайте сначала начнем с негибкого контейнера, где каждый дочерний элемент - блочные элементы - будет находиться на новой строке:

Если мы сделаем родительский элемент контейнером flex , все дочерние элементы будут размещены в одной строке.

  .flex-container {
  дисплей: гибкий;
  Flex-wrap: nowrap;
}

По умолчанию для гибких контейнеров установлено значение «no-wrap». Это означает, что вам не нужно явно заявлять об этом, как мы сделали выше.

Теперь у нас есть дочерние элементы в одной строке, но даже если в вашем окне недостаточно места для них, дочерние элементы останутся в одной строке.При изменении размера окна дочерние элементы будут продолжать сжиматься, пока они в конечном итоге не переполнят родительский элемент.

Итак, как это исправить? С flex-wrap !

Познакомьтесь с вариантами гибкой упаковки

Для свойства flex-wrap существует три допустимых значения:

  • nowrap: это значение по умолчанию для контейнеров flex , поэтому его не нужно явно объявлять, если вы не переопределяете другие стили.Дочерние элементы всегда будут находиться в одной строке.
  • wrap: Использование wrap позволит вашим дочерним элементам переноситься на дополнительные строки, когда они больше не помещаются в исходную строку. Несоответствующие элементы будут перенесены в левый нижний угол родительского элемента.
  • wrap-reverse: это вызовет обратный эффект wrap . Вместо того, чтобы переносить переполняющийся элемент (-ы) в нижний левый угол, он будет перенесен на новую строку над первыми дочерними элементами в верхнем левом углу родительского.

Чтобы увидеть разницу между wrap и wrap-reverse , сравните следующие два примера, изменив размер окна:

  .flex-container {
  дисплей: гибкий;
  flex-wrap: обертка;
}

В этом первом примере переполненные элементы переходят на новую строку ниже первых дочерних элементов.

  .flex-container {
  дисплей: гибкий;
  flex-wrap: накрутка-реверс;
}

В этом втором примере происходит обратное: переполняющиеся элементы обертываются над первыми дочерними элементами. wrap-reverse реже используется, но все же хорошо иметь в своем наборе инструментов CSS. 🥳

Flexbox Сокращение: flex-flow

Если вы предпочитаете писать код на как можно меньшем количестве строк, вы будете рады узнать, что flex-wrap - это часть сокращения flexbox flex-flow .

flex-flow - это свойство flexbox, которое заменяет flex-wrap и flex-direction .

Краткое знакомство с flex-direction

flex-direction определяет, должны ли ваши дочерние элементы располагаться в строке или столбце.Четыре варианта: строка , столбец , столбец-обратный и строка-обратный . Значение по умолчанию для flex-direction - , строка .

Использование flex-flow

flex-flow сначала объявляет flex-direction родительского элемента, а вторым - значение flex-wrap . Его следует использовать только в том случае, если вам нужно явно объявить flex-direction и flex-wrap как отличные от значений по умолчанию.

Это означает, что эти свойства гибкости можно записать так:

  .backwards-flex-container {
  flex-direction: строка-реверс;
  flex-wrap: накрутка-реверс;
}

Или с сокращением flex-flow , чтобы получить тот же эффект:

  .backwards-flex-container {
  flex-flow: ряд-обратное обертывание-обратное;
}

В этом «обратном» примере дочерние элементы будут располагаться в строке, но в обратном порядке ( flex-direction ).Кроме того, переполненные дочерние элементы будут перенесены в новую строку над первой строкой .

flex-flow - единственное сокращение flexbox, которое специально включает flex-wrap, но есть много других. Если вы предпочитаете сокращенную запись, у большинства свойств flexbox есть сокращенные варианты! 💅

Поддержка браузера

В целом flexbox и flex-wrap очень хорошо поддерживаются во всех современных браузерах. Даже Internet Explorer (IE) частично поддерживает flexbox и flex-wrap после IE9.

Префиксы Flexbox

Использование префиксов для flexbox и flex-wrap в наши дни менее распространено, и то, будете ли вы их использовать, будет зависеть от того, какие версии браузеров вы пытаетесь поддерживать.

  .parent {
  дисплей: гибкий;
  дисплей: -webkit-flex; / * старые версии Chrome / Safari / Opera * /
  дисплей: -ms-flexbox; / * IE10 * /

  flex-wrap: обертка;
  -webkit-flex-wrap: обертка; / * старые версии Chrome / Safari / Opera * /
}

Обратите внимание, что flex-wrap - это одно из свойств flexbox, которое специально не поддерживается некоторыми старыми версиями браузеров, например Firefox.

Чтобы быть уверенным, что префиксы необходимы, отметьте «Могу ли я использовать» для получения самой последней информации о поддержке браузеров, особенно если вы поддерживаете старые версии браузеров.

CSS гибкая пленка

Пример <стиль> .external-container { высота: 200 пикселей; шрифт: 100 24px / 100px без засечек; выравнивание текста: центр; белый цвет; дисплей: гибкий; flex-wrap: обертка; } .outer-container div { высота: 50%; ширина: 50%; } .красный { фон: оранжево-красный; } .зеленый { фон: желто-зеленый; } .синий { фон: стально-голубой; }

1
2
3

Свойство CSS flex-wrap определяет, является ли гибкий контейнер однострочным или многострочным (т.е.е. элементы гибкости можно обернуть на несколько строк или принудительно разместить на одной строке). Вы также можете указать направление, в котором несколько строк укладываются в стопку.

Синтаксис

flex-wrap: nowrap | упаковка | обертка-реверс

Возможные значения

nowrap
Гибкий контейнер однострочный.Обертывание не допускается.
обертка
Гибкий контейнер многострочный. Элементы Flex можно переносить на новую строку.
реверсивная
То же, что wrap , за исключением того, что поперечное начало и поперечное направление поменяны местами.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:

начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как при наследовании или при начальном , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Основная информация об имуществе

Начальное значение
nowrap
Относится к
Гибкие контейнеры
Унаследовано?
№
СМИ
Визуальный
Расчетное значение
Указанное значение
Анимационный
№

Пример кода

Базовый CSS

.external-container { дисплей: гибкий; flex-wrap: обертка; }

Рабочий пример в HTML-документе

Пример <стиль> .outer-container { высота: 200 пикселей; шрифт: 100 24px / 100px без засечек; выравнивание текста: центр; белый цвет; дисплей: гибкий; flex-wrap: обертка; } .external-container div { высота: 50%; ширина: 50%; } .красный { фон: оранжево-красный; } .зеленый { фон: желто-зеленый; } .синий { фон: стально-голубой; }
1
2
3

Попробуйте

Спецификации CSS

О Flexbox

Flexbox относится к модулю Flexible Box Layout, представленному в CSS3.Гибкий контейнер - это элемент с display: flex или display: inline-flex .

В модели гибкого макета дочерние элементы гибкого контейнера могут располагаться в любом направлении и могут «сгибать» свои размеры, либо увеличиваясь, чтобы заполнить неиспользуемое пространство, либо сжимаясь, чтобы избежать переполнения родительского элемента.

Дополнительные сведения о гибких элементах см. В свойстве flex .

Поддержка браузера

Следующая таблица предоставлена ​​Caniuse.com показывает уровень поддержки этой функции браузером.

Префиксы поставщиков

Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

W3C не рекомендует эту практику, однако во многих случаях единственный способ проверить свойство - это включить расширение CSS, совместимое с вашим браузером.

Основные производители браузеров обычно стремятся придерживаться спецификаций W3C, и когда они поддерживают свойство без префикса, они обычно удаляют версию с префиксом. Кроме того, W3C советует поставщикам удалить свои префиксы для свойств, которые достигают статуса кандидата в рекомендации.

Многие разработчики используют Autoprefixer, который представляет собой постпроцессор для CSS.Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

CSS Flexbox # 8. Свойство flex-wrap

До сих пор вы видели, что гибкие элементы остаются в одной строке, независимо от содержимого внутри них и доступного пространства.

С помощью свойства flex-wrap можно перенести гибкие элементы на следующую строку.

Продемонстрируем это свойство на примере.

Шаг №1. Создайте HTML

  • Откройте нужный редактор кода.
  • Создайте пустой файл HTML.
  • Посетите эту страницу, скопируйте HTML-код и сохраните файл.

Шаг 2. Создайте CSS

Давайте добавим базовый стиль.

  • Создайте пустой файл CSS и назовите его style.css (этот файл уже связан в HTML-коде)
  • Добавьте этот код в файл:
  / * ГЛОБАЛЬНЫЕ СТИЛИ * / * {box-sizing: border-box; } тело {цвет фона: #AAA; маржа: 0px 50px 50px; }.item {padding: 2rem; граница: 5px solid # 87b5ff; радиус границы: 3 пикселя; размер шрифта: 2em; семейство шрифтов: без засечек; font-weight: жирный; цвет фона: # 1c57b5; }

Шаг 3. Стили CSS Flexbox

Пора объявить основной контейнер как flex-контейнер.

  .container {display: flex; цвет фона: # f5ca3c; }

Каждый гибкий элемент теперь имеет такую ​​же ширину, как и содержимое внутри него. Теперь вам нужно объявить «ширину» каждого гибкого элемента на основе свойства flex-base .

  .item1 {гибкость: 50%; } .item2 {гибкая основа: 50%; } .item3 {гибкая основа: 80%; } .item4 {гибкая основа: 100%; }

Каждый элемент теперь имеет предопределенную ширину, но независимо от этого они остаются в одной строке. Здесь полезно свойство flex-wrap .

  .container {
 дисплей: гибкий; цвет фона: # f5ca3c; flex-wrap: обертка; }

Теперь каждый элемент имеет правильную ширину и размещается в соответствии с ней на «правильной» строке.Давайте центрируем элемент контента по главной оси.

  .item3 {гибкая основа: 80%; маржа: авто; }

Свойство flex-wrap имеет два других возможных значения:

  • nowrap (это значение по умолчанию).
  • wrap-reverse (меняет порядок начала и конца на поперечной (вторичной) оси.
  .container {
дисплей: гибкий;
цвет фона: # f5ca3c;
flex-wrap: накрутка-реверс;
}

Заключение

Свойство flex-wrap позволяет вам переносить элементы на следующую строку, таким образом вы можете контролировать размещение гибких элементов и легко достичь желаемого макета.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *