Свойства элемента CSS Flexbox - CSS Flexbox - httpdoc.ru

Свойства элементов Flex

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


Порядок Flex-Items

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

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

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

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


Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container {
		display: flex;
		background-color: #f1f1f1;
	}
	
	.flex-items {
		background-color: Tomato;
		color: white;
		width: 100px;
		margin: 10px;
		text-align: center;
		height: 50px;
		font-size: 25px;
	}
	</style>
</head>

<body>
	<h1>Order Property</h1>
	<p>The order property gets applied to flex-items. Notice the order of flex-items according to their specified order.</p>
	<div class="flex-container">
		<div style="order: 4" class="flex-items">1</div>
		<div style="order: 2" class="flex-items">2</div>
		<div style="order: 1" class="flex-items">3</div>
		<div style="order: 3" class="flex-items">4</div>
	</div>
</body>
</html>

Выход

Заказать недвижимость

Свойство order применяется к flex-элементам. Обратите внимание на порядок гибких элементов в соответствии с их указанным порядком.

1
2
3
4

Свойство Flex Grow

Свойство Flex-grow указывает количество места, которое занимает гибкий элемент по сравнению с другими гибкими элементами. Это свойство работает, когда в гибком блоке остается немного свободного места. По умолчанию значение гибкости для всех элементов равно 0 .

Если мы присвоим 1 гибкому элементу значение, то он будет расти быстрее, чем другие элементы.

Предположим, есть два flex-элемента с flex-grow:1; , теперь оба будут занимать одинаковое количество места при увеличении. Но если вы назначите flex-grow:2; один элемент, то этот элемент вырастет в два раза по размеру другого элемента во время расширения flexbox. Посмотрите на пример ниже:

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container {
		display: flex;
		background-color: #f1f1f1;
	}
	
	.flex-items {
		background-color: Tomato;
		color: white;
		width: 100px;
		margin: 10px;
		text-align: center;
		height: 75px;
		font-size: 30px;
	}
	</style>
</head>

<body>
	<h1>Flex-grow Property</h1>
	<p>Notice that the 1st item is bigger than 3rd and 4th but the 2nd item is bigger than than the 1st item. This is because of their flex-grow properties. </p>
	<div class="flex-container">
		<div style="flex-grow:1; " class="flex-items">1</div>
		<div style="flex-grow:2 ;" class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
	</div>
</body>
</html>

Выход

Свойство Flex-Grow

Обратите внимание, что 1-й элемент больше 3-го и 4-го, но 2-й элемент больше 1-го. Это из-за их свойств гибкости и роста.

1
2
3
4

Гибкое усадочное свойство

Свойство Flex-shrink работает аналогично Flex-grow, но сжимает элементы. Он указывает, насколько гибкий элемент будет сжиматься (при необходимости) по сравнению с другими гибкими элементами во время сжатия flexbox.

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container {
		display: flex;
		background-color: #f1f1f1;
	}
	
	.flex-items {
		background-color: Tomato;
		color: white;
		width: 200px;
		margin: 10px;
		text-align: center;
		height: 75px;
		font-size: 30px;
	}
	</style>
</head>

<body>
	<h1>Flex-shrink Property</h1>
	<p>If you shrink the viewport then the 2nd item will shrink faster than other items. This is because of its flex-shrink property. </p>
	<div class="flex-container">
		<div class="flex-items">1</div>
		<div style="flex-shrink:2;" class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
	</div>
</body>
</html>

Выход

Гибкость-усадка

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

1
2
3
4

Свойство Flex Basis

Flex-base используется для определения начального размера flex-элемента. В flex-direction:row он устанавливает ширину гибкого элемента, а в flex-direction:column; устанавливает высоту. ТАК он работает как для высоты, так и для ширины в соответствии с заданным гибким направлением.

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

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container {
		display: flex;
		background-color: #f1f1f1;
	}
	
	.flex-container2 {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
	}
	
	.flex-items {
		background-color: Tomato;
		color: white;
		width: 200px;
		margin: 10px;
		text-align: center;
		height: 75px;
		font-size: 30px;
	}
	</style>
</head>

<body>
	<h1>Flex-basis Property</h1>
	<h2>Flex direction Row</h2>
	<p>Here, the flex-basis is working as initial width of the first flex-item.</p>
	<div class="flex-container">
		<div style="flex-basis:300px;" class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
	</div>
	<h2>Flex direction Column</h2>
	<p>Here, the flex-basis is working as initial height of the first flex-item.</p>
	<div class="flex-container2">
		<div style="flex-basis:200px;" class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
	</div>
</body>
</html>

Выход

Свойство Flex-основы

Направление изгиба Ряд

Здесь гибкая основа работает как начальная ширина первого гибкого элемента.

1
2
3
4

Колонна направления изгиба

Здесь гибкая основа работает как начальная высота первого гибкого элемента.

1
2
3
4

Собственная собственность Flex

Свойство Align Self используется гибкими элементами для переопределения значения выравнивания, установленного контейнером. Например, есть 3 гибких элемента, align-items:center; и если мы добавим align-self:flex-start; первый гибкий элемент, он будет помещен в начало гибкости, но все остальные гибкие элементы будут центрированы.

Примечание. Параметр align-self использует следующие значения : flex-start | гибкий конец | центр | растянуть | исходный уровень |

Давайте посмотрим на простой пример:

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container {
		display: flex;
		background-color: #f1f1f1;
		height: 400px;
		align-items: center;
	}
	
	.flex-items {
		background-color: Tomato;
		color: white;
		width: 200px;
		margin: 10px;
		text-align: center;
		height: 75px;
		font-size: 30px;
	}
	</style>
</head>

<body>
	<h1>Align-Self Property</h1>
	<p>Here, the first flex-item is aligned at flex-start but all other are centered.</p>
	<div class="flex-container">
		<div style="align-self:flex-start;" class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
	</div>
</body>
</html>

Выход

Свойство Align-Self

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

1
2
3
4

Сокращенное свойство Flex

Flex Свойство стенография для гибких термоусадочного, гибких вырастал и биоэтанол основы. Синтаксис flex :

Синтаксис
flex: < flex-grow >  < flex-shrink >  < гибкая основа > ;
              Пример - flex: 2 2 200 пикселей;

Давайте посмотрим на пример:

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container {
		display: flex;
		align-items: stretch;
		background-color: #f1f1f1;
	}
	
	.flex-items {
		background-color: Tomato;
		color: white;
		width: 100px;
		margin: 10px;
		text-align: center;
		height: 75px;
		font-size: 30px;
	}
	</style>
</head>

<body>
	<h1>Flex Property</h1>
	<p>The second flex item won't grow or shrink as both values are 0 and has a initial width of 150px.</p>
	<div class="flex-container">
		<div class="flex-items">1</div>
		<div style="flex: 0 0 150px" class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
	</div>
</body>
</html>

Выход

Flex свойство

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

1
2
3
4

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