wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Flex wrap css: flex-wrap | CSS | WebReference

alexxlab
No Comments

Содержание

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>

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

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;
}

Изучаем Flexbox | Кабинет Веб-мастера

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

Сегодня мы будем изучать долгожданное нововведение всех вебмастеров — Flexbox-лейаут или гибкие блоки.

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

Начнем разбираться по порядку.

Для просмотра этой статьи и использования этих технологий, используйте современные браузеры

Поддержка браузерами: Google Chrome 21+, Opera 12.1+, Mozilla FireFox 22+, IE 10+, Safari 3+, Android 2.1+, iOS 3.2+.

Создадим простую структуру:

<div>
	<div>100500</div>
	<div>2</div>
	<div>3</div>
</div>

1 контейнер и 3 дочерних элемента. С этими элементами мы будем выполнять все манипуляции. Структура изменяться не будет, поэтому в дальнейшем буду приводить изменения только стилей css.

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

display:flex

Применяется к родительскому элементу. Определяет родительский элемент как блочный.

Поэтому добавим базовые стили, которые определят, что используемые нами элементы относятся к теме статьи:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}

В результате мы получим вот такую картинку:

При этом контейнер будет занимать всю доступную ширину (так как свойство display:flex определяет элемент как блочный) — для примера, ограничил ширину — 760px, а дочерние элементы занимают ширину по содержимому.

Если мы зададим родителю свойство display:inline-flex, то это определит родителя как блок-инлайновый элемент (при этом результат не изменится), родитель будет занимать ширину по содержимому (а вести себя как display:inline-block).

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

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
	flex-direction:row-reverse;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}

Теперь элементы располагаются справа-налево. И первый дочерний элемент стоит справа. (Если направление текста изменено для всех страницы на обратное — справа налево rtl, вместо ltr — то все свойства выравнивания — это и далее — работают наоборот).

flex-direction

Применяется к родительскому элементу. Устанавливает направление дочерних flex элементов.

Все доступные варианты выравнивания для свойства flex-direction:

  • row (по умолчанию): слева направо для ltr, справа налево для rtl
  • row-reverse: справа налево для ltr, слева направо для rtl
  • column: аналогично row, сверху вниз
  • column-reverse: аналогично row-reverse, снизу вверх

display:inline-flex

Применяется к родительскому элементу. Определяет родительский элемент как инлайн-блочный (аналог inline-block).

На картинке наглядно видна разница между display:flex и display:inline-flex на основе свойства flex-direction. Больше к этим свойствам обращаться не будем.

flex-wrap

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

Все доступные варианты выравнивания для свойства flex-wrap:

  • nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl
  • wrap: многострочный / слева направо для ltr, справа налево для rtl
  • wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl

Зададим стили для примера:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	flex-wrap:wrap;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}

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

Применим свойство flex-wrap:wrap-reverse;:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	flex-wrap:wrap-reverse;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}

flex-flow

Применяется к родительскому элементу. Служит сокращением для flex-direction и flex-wrap.

Значение по умолчанию: flex-flow:row nowrap;

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	flex-flow:row nowrap;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}

justify-content

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

Все возможные значения для свойства:

  • flex-start (по умолчанию): элементы сдвигаются к началу строки
  • flex-end: элементы сдвигаются к концу строки
  • center: элементы выравниваются по центру строки
  • space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
  • space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки

Зададим свойства для выравнивания элементов по центру:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
	justify-content:center;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}

align-items

Применяется к родительскому элементу. Выравнивает дочерние элементы по вертикали. Свойство работает аналогично justify-content, но перпендикулярно.

Все возможные значения для свойства:

  • flex-start: граница cross-start для элементов располагается на позиции cross-start
  • flex-end: граница cross-end для элементов располагается на позиции cross-end
  • center: элементы выравниваются по центру поперечной оси
  • baseline: элементы выравниваются по своей базовой линии
  • stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)

Внимание! Для примера немного добавились стили:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
	align-items:center;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}
.child:last-child {
	height:200px;
}

align-content

Применяется к родительскому элементу. Свойство не работает с однострочным flexbox. Определяет выравнивание строк (аналогично свойству justify-content).

Все возможные значения свойства:

  • flex-start: строки выравниваются относительно начала контейнера
  • flex-end: строки выравниваются относительно конца контейнера
  • center: строки выравниваются по центру контейнера
  • space-between: строки распределяются равномерно (первая строка в начале строки, последняя — в конце)
  • space-around: строки распределяются равномерно с равным расстоянием между собой
  • stretch (по умолчанию): строки растягиваются, заполняя свободное пространство

Обновим стили для примера:

.parent {
	height:500px; /* организуем лишнее пространство */
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
	flex-wrap:wrap; /* делаем flexbox многострочным */
	align-content:space-around;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
	width:100%; /* делаем перенос строк */
}

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

order

Применяется к дочерним элементам. Определяет порядок расположения элементов (можно изменить исходный порядок расположения в контейнере).

Обновляем стили:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}
.child:first-child {
	order:3;
}

Вуаля! Первый элемент стал последним.

flex-grow

Применяется к дочерним элементам. Принимает безразмерное значение, которое означает пропорцию, которую дочерний элемент занимает внутри родителя.

Если у всех дочерних элементов задано: flex-grow:1;, то они займут одинаковый размер (или 33,3333%). Если один из элементов будет иметь значение 2, то он будет занимать размер в 2 раза больше остальных.

Обновим стили:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
	flex-grow:1;
}
.child:first-child {
	flex-grow:2;
}

Первый элемент занимает в 2 раза больше места, чем другие.

flex-shrink

Применяется к дочерним элементам. Определяет возможность элементов сжиматься при необходимости.

По умолчанию значение 1. Отрицательные числа не принимаются. 0 — элемент не сжимается.

Обновим стили:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
	width:200px;
	flex-shrink:5;
}
.child:first-child {
	flex-shrink:1;
}

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

flex-basis

Применяется к дочерним элементам. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере (что-то похожее на width).

По умолчанию значение default auto. Принимает значение ширины (px, em и другие).

Обновим стили:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:1060px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
	flex-basis:200px;
}

В представленном примере все блоки имеют одинаковую начальную ширину — 200px.

flex

Применяется к дочерним элементам. Сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры не обязательны.

Значения по умолчанию: 0 1 auto.

Обновим стили:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
	flex:none;
}

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

align-self

Применяется к дочерним элементам. Позволяет переопределить выравнивание, заданное в align-items для отдельных элементов.

Все возможные значения для свойства:

  • flex-start: граница cross-start для элементов располагается на позиции cross-start
  • flex-end: граница cross-end для элементов располагается на позиции cross-end
  • center: элементы выравниваются по центру поперечной оси
  • baseline: элементы выравниваются по своей базовой линии
  • stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)

Обновим стили. Зададим другое выравнивание первому элементу:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
	align-items:center;
	height:300px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
}
.child:first-child {
	align-self:flex-start;
}

В приведенном примере — первый блок находится в начале родительского, а второй и третий выравнены по центру.

Ну и в заключение приведу пример, в которой в строку будут стоят 3 блока. Первый блок будет 200px, сжиматься и растягиваться не будет. Остальные 2 блока будут занимать все оставшееся пространство, причем как растягиваться так и сжиматься. Без flexbox это сделать достаточно проблематично. Посмотрим на код css при использовании flexbox:

.parent {
	display:flex;
	border:2px solid #FF8C00;
	padding:20px;
	width:760px;
}
.child {
	background-color:#ededed;
	border:2px solid #768D44;
	padding:30px;
	margin:10px;
	flex:1 200px;
}
.child:first-child {
	flex:0 0 200px;
}

Вот и все! Обзорная экскурсия по flexbox закончена. Экспериментируйте и все получится!

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

CSS свойства

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

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

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

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

CSS синтаксис:

/* только направление */
flex-flow:"flex-direction";

/* однострочный, или многострочный */
flex-flow:"flex-wrap";

/* оба свойства в одном объявлении */
flex-flow:"flex-direction flex-wrap | initial | inherit";

JavaScript синтаксис:

object.style.flexFlow = "column wrap"

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

ЗначениеОписание
flex-directionУказывает направление, в соответствии с которым располагаются флекс элементы внутри контейнера.

Направление элементов формируется исходя из положения двух осей: главной оси контейнера и поперечной оси, которая всегда распологается перпендикулярно главной.
Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию). Для значения rtl отображается зеркально.

Допустимые значения:

  • row — флекс элементы отображаются горизонтально, в виде строки. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а при значения rtl отображается справо налево. Это значение по умолчанию.
  • row-reverse — флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается справо налево, а при значения rtl отображается слева направо.
  • column — флекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз.
  • column-reverse — Флекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх).
flex-wrap

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

Допустимые значения:

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html

CSS свойство flex-wrap

Пример

При необходимости оберните гибкие предметы:

div {

дисплей: гибкий;
flex-wrap: пленка;
}

Попробуй сам »

Определение и использование

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

Примечание: Если элементы не являются гибкими, свойство flex-wrap не действует.

Значение по умолчанию: nowrap
Унаследовано: нет
Анимируемое: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.flexWrap = «nowrap»
Попробуй это

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

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

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Объект
гибкая пленка 29,0
21,0 -вебкит-		 11,0 28,0
18,0 -моз-		 9,0
6,1 -вебкит-		 17,0

Синтаксис CSS

Flex-wrap: nowrap | wrap | wrap-reverse | начальный | наследование;

Стоимость недвижимости

Значение Описание Играй
nowrap Значение по умолчанию.Указывает, что гибкие элементы не будут обертываться Играй »
обертка Указывает, что гибкие элементы будут при необходимости обернуты Играй »
обертка-реверс Указывает, что гибкие элементы будут упакованы, если необходимо, в обратном порядке Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебное пособие по CSS: CSS Flexible Box

Ссылка CSS: свойство flex

Ссылка CSS: свойство flex-flow

Ссылка CSS: свойство flex-direction

Ссылка CSS: свойство flex-basic

Ссылка CSS: свойство flex-grow

Ссылка CSS: свойство flex-shrink

Ссылка на HTML DOM: свойство flexWrap

.

html — CSS Flexbox: гибкий перенос одного div на две строки с раздельным ростом на каждой строке

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

    .

    html — Перенос текста div Flexbox

    Переполнение стека

    1. Около

    2. Продукты

    3. Для команд

    1. Переполнение стека
      Общественные вопросы и ответы

    2. Переполнение стека для команд
      Где разработчики и технологи делятся частными знаниями с коллегами

    3. Вакансии
      Программирование и связанные с ним технические возможности карьерного роста

    4. Талант
      Нанимайте технических специалистов и создавайте свой бренд работодателя

    5. Реклама
      Обратитесь к разработчикам и технологам со всего мира

    6. О компании

    .

    No related posts.

Share :

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

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