Flexbox расположение блоков?

Question

[Alxsick]

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

<div class="flex">
				<div class="column_1">
					<div class="column_text">
						<h3>
						July 2010<br>
						Our Humble Beginnings
						</h3>
					<p>Proin iaculis purus consequat sem cure 
						digni ssim. Donec porttitora entum suscipit 
						aenean rhoncus posuere odio in tincidunt. Proin
						iaculis purus consequat sem cure digni
						ssim. Donec porttitora entum suscipit.</p>
					</div>
					<div class="column_text">
						<h3>
						December 2012<br>
						Enter The Dark Dфays
						</h3>
						<p>Proin iaculis purus consequat sem cure 
						digni ssim. Donec porttitora entum suscipit 
						aenean rhoncus posuere odio in tincidunt. Proin 
						iaculis purus consequat sem cure digni..
						</p>
					</div>
				</div>
				<div class="img">
						<div><img src="img/about1.png"></div>
						<div><img src="img/line.png"></div>
						<div><img src="img/about2.png"></div>
						<div><img src="img/line.png"></div>
						<div><img src="img/about3.png"></div>
						<div><img src="img/line.png"></div>
						<div><img src="img/about4.png"></div>
						<div><img src="img/line.png"></div>
						<div><img src="img/about5.png"></div>
				</div>
				<div class="column_3">
					<div class="column_text">
						<h3>
						January 2011<br>
						Facing Startup Battles
						</h3>
						<p>Proin iaculis purus consequat sem cure 
						digni ssim. Donec porttitora entum suscipit 
						aenean rhoncus posuere odio in tincidunt. Proin 
						iaculis purus consequat sem cure digni 
						ssim. Donec porttitora entum suscipit aenean 
						rhoncus posuere odio in tincidunt.</p>
					</div>
					<div class="column_text">
						<h3>
						february 2014<br>
						Our Triumph
						</h3>
						<p>Proin iaculis purus consequat sem cure 
						digni ssim. Donec porttitora entum suscipit 
						aenean rhoncus posuere odio in tincidunt. Proin 
						iaculis purus consequat sem cure digni 
						ssim. Donec porttitora entum suscipit aenean.
						</p>
					</div>
				</div>

css:

.flex {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 85px;

	
}
.column1 {
display: flex;
flex-direction: column;
align-items: center;
align-content: flex-start;
}

.column_text {
	width: 306px;
}

.column_text h3 {
font-size: 18px;
color: #222222;
text-transform: uppercase;
padding-top: 0;
}

.column_text p {
font-size: 18px;
color: #777777;
margin-top: 17px;
text-align: right;
}

.column_1 h3 {
	text-align: right;
}
.column_3 p {
	text-align: left;
}

.img {
display: flex;
flex-direction: column;
align-items: center;
}

.column_3 {
display: flex;
flex-direction: column;
align-items: flex-end;
}

.column_1 .column_text:nth-child(2) {
margin-top: 345px;
}

.column_3 .column_text:nth-child(1) {
margin-top: 280px;
}

.column_3 .column_text:nth-child(2) {
margin-top: 300px;
}

И собственно вопрос, можно ли без использования margin, сдвинуть блоки с текстом, как на картинке(хотя там немного криво вышло). С помощью значений flexbox. Еще пришло в голову добавить пустые дивы и и поставить им flex-grow: 2, но пустые дивы это ведь плохая практика?

Comments

[Rustam Bainazarov]

Неправильно делаете.

Картинка и текст должны быть в одном блоке, тогда вы можете точно хоть относительно, хоть абсолютно позиционировать текстовые блоки относительно одной строки. Пустое место не надо делать блоками. Сойдёт разбивка на проценты двух колонок в одном блоке (текст + картинка). Calc() вам в помощь.

Чередование делаете с помощью :nth-child(even).

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/VVjgGw вот так