CSS :: Свойство justify-content
http://belarusweb.net
Основы создания сайтов

CSS :: Свойство justify-content

css-свойство justify-content (от англ. justify contentвыравнивание содержимого) используется для управления способом выравнивания флекс-элементов вдоль главной оси и распределения пространства между ними.

Следует отметить, что если какие-либо флекс-элементы будут иметь ненулевые значения свойств margin или flex-grow, свойство justify-content будет игнорироваться.

Характеристики

  • Значение по умолчанию: flex-start.
  • Применяется: к флекс-контейнеру.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.justifyContent="value".

Синтаксис

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Значения

  • flex-start – флекс-элементы прижимаются к началу строки (используется по умолчанию).
  • flex-end – флекс-элементы прижимаются к концу строки.
  • center – флекс-элементы выравниваются по центру строки.
  • space-between – флекс-элементы равномерно распределяются вдоль строки, но крайние из них прижимаются к соответствующим сторонам флекс-контейнера.
  • space-around – флекс-элементы равномерно распределяются вдоль строки, но пустое пространство перед первым элементом и после последнего будет равно половине пространства между соседними флекс-элементами.
  • space-evenly – флекс-элементы распределяются полностью равномерно, при этом пустое пространство перед первым элементом и после последнего будет такое же, как и между любыми соседними флекс-элементами.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		width: 600px;
		height: 100px;
		margin: auto;
		margin-top: 10px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p, span{
		width: 40px;
		height: 40px;
		padding: 10px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс для 1-го div'а */	
		.div_flex_1{
		justify-content: flex-start;
		}
		
		/* Это класс для 2-го div'а */	
		.div_flex_2{
		justify-content: flex-end;
		}
		
		/* Это класс для 3-го div'а */	
		.div_flex_3{
		justify-content: center;
		}
		
		/* Это класс для 4-го div'а */	
		.div_flex_4{
		justify-content: space-between;
		}
				
		/* Это класс для 5-го div'а */	
		.div_flex_5{
		justify-content: space-around;
		}
		
		/* Это класс для 6-го и 7-го div'ов */	
		.div_flex_6, .div_flex_7{
		justify-content: space-evenly;
		}
		
		
		/* Это класс для флексов 7-го div'а */	
		.div_flex_7>p, .div_flex_7>span{
		margin: auto;
		}		
				
	</style>
</head>
<body>

	<div class="div_flex_1">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_2">
		<p>1</p><span>2</span><p>3</p>
	</div>	
	
	<div class="div_flex_3">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_4">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_5">
		<p>1</p><span>2</span><p>3</p>
	</div>	

	<div class="div_flex_6">
		<p>1</p><span>2</span><p>3</p>
	</div>	

	<div class="div_flex_7">
		<p>1</p><span>2</span><p>3</p>
	</div>
</body>
</html>

Пример №1