Почему свойство justify-content: space-between не работает с position: absolute?

Question

[JordanBelford]

Здравствуйте! Необходимо чтобы блок .content__row наезжал не много на изображения. Для решения этой проблемы блок .content сделал position: relative, а .content__row position: absolute, но теперь свойство justify-content: space-between перестало работать. Вручную не хотелось бы делать отступ между картинками, кто знает в чем мб проблема ?

<div class="content">
	<div class="content__wrapper">
		<div class="content_column">
			<div class="content__title">
				Fall in love <span>with Poland</span>
			</div>
			<div class="content__subtitle">Best way to find your perfect place in Poland</div>
			<div class="content__link"><a href="">SEARCH YOUR PLACE</a></div>
			<div class="content__text">Popular places to discover</div>
		</div>
	</div>
	<div class="content__row">
		<div class="content__item"><img src="img/content/1.png" alt=""></div>
		<div class="content__item">
			<img src="img/content/2.png" alt="">
			<p class="content__title-card">Zakopane</p>
			<p class="content__subtitle-card">Małopolskie</p>
		</div>
		<div class="content__item">
			<img src="img/content/3.png" alt="">
			<p class="content__title-maincard">Sandomierz</p>
			<p class="content__subtitle-maincard">Swietokrzyskie</p>
		</div>
		<div class="content__item">
			<img src="img/content/4.png" alt="">
			<p class="content__title-card">Sopot</p>
			<p class="content__subtitle-card">Pomorskie</p>
			<a href="" class="link">VIEW OFFERS</a>
		</div>
		<div class="content__item"><img src="img/content/5.png" alt=""></div>
	</div>
</div>

.content {
	position: relative;
}
.content__wrapper {
	background: url('../img/content/bg.png') center /cover  no-repeat;
	min-height: 125vh;
}
.content_column {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	padding: 20% 0 0 0;
	color: #fff;
}
.content__title {
	font-size: 92px;
	line-height: 92px;
	font-weight: 700;
}
.content__title span {
	color: #ed6950;
}
.content__subtitle {
	font-size: 18px;
	line-height: 93px;
}
.content__link a {
	font-size: 14px;
	color: #b98000;
	line-height: 92px;
	font-weight: 700;
	letter-spacing: 1.05px;
	padding: 20px 28px;
	border-radius: 30px;
	background-color: #ffc74a;
}
.content__text {
	margin: 150px 0 20px 0;
	font-size: 18px;
	line-height: 93px;
}
.content__row {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 75%;
}
.content__item {
	color: #fff;
	line-height: 92px;
	max-height: 450px;
}
.content__title-card {
	font-size: 30px;
}
.content__subtitle-card {
	font-size: 14px;
	color: #ffc74a;
}
.content__title-maincard {
	font-size: 48px;
	font-weight: 700;
}
.content__subtitle-maincard {
	font-size: 14px;
}
.link {
	font-size: 14px;
	color: #b98000;
	line-height: 92px;
	font-weight: 700;
	letter-spacing: 1.05px;
	padding: 16px 26px;
	border-radius: 30px;
	background-color: #ffc74a;
}

Answer 1

[Максим]

ширину в 100%

Answer 2

[Арсений Матыцин]

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

Т.е. justfy-content работает, но т.к. размер блока = размеру содержимого, то, что оно работает просто не видно.

Answer 3

[Максим Ламбов]

свойство justify-content работает только для flex контейнера

Comments

[JordanBelford]

Так блок .content__row это и есть flex контейнер. Свойство justify-content перестало работать после того как ему было задано свойство position: absolute

[Максим Ламбов]

не заметил, задай width