Равномерное распределение элементов по всей ширине блока при помощи CSS


Равномерно распределить элементы в блоке (враппере) можно при помощи CSS свойства Flexbox. Если интересно подробнее о нём узнать, в поисковиках о нём давно уже все расписано. И вроде он удобный и Can I use показывает, что его поддерживает ~ 96.68% версий браузеров. Но на практике оказывается немного всё иначе. Есть люди которые используют старые браузеры, пользуются девайсами, не поддерживающие Flexbox или сидят на старых версиях macOS, на которых старая версия Safari и т.д., и данное свойство не работает и верстка едет. Но есть выход, сделать равномерное распределение без помощи Flexbox.

Допустим, у нас такой набор элементов:

<div class="wrapper">
	<div>element1</div>
	<div>element2</div>
	<div>element3</div>
</div>	
	

Чтобы равномерно по ширине распределить div’ы внутри враппера, должны быть прописаны такие стили:

.wrapper{
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: justify;
	/* Свои стили */
}
	.wrapper:after{
		position: relative;
		display: inline-block;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		vertical-align: top;
		content: '';
	}
	.wrapper>div{
		position: relative;
		display: inline-block;
		width: 25%;
		height: 50px;
		box-sizing: border-box;
		text-align: left;
		vertical-align: top;
		/* Свои стили */
	}

Врапперу ставим свойство text-align: justify которое распределит элементы равномерно. Но оно не сработает, если не прописать врапперу псевдоэлемент :after, который создаст подложку под наши элементы и поможет их выровнять по ширине.

В результате у нас получится вот так. Есть конечно небольшая проблема в том, что появляется пустое место снизу, но эту проблему всегда можно решить через margin


Для связи

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

Или написать прямо на почту info@bobreod.ru





Отправляя форму, вы соглашаетесь с нашей политикой конфиденциальности