3 ряда друг под другом flex

120

08 сентября 2019, 09:50

Всем привет,сейчас будет ОЧЕНЬ ТУПОЙ вопрос. за случился затык. как расположить 3 ряда друг под другом во флексах?

.who-list{ 
	margin-top:40px; 
	display: inline-block; 
	border:1px solid; 
} 
 
.who-list-wrap{ 
	border:1px solid; 
	 
} 
.who-list_item{ 
	 
	vertical-align: top; 
	margin-top:50px; 
} 
 
.who-list_item-title{ 
	font-family: HelveticaNeueCyr; 
	line-height: 30px; 
	font-size: 26px; 
	color: #333333; 
	font-weight: 700; 
	margin-bottom: 18px; 
} 
 
.who-list_item-desc{ 
	font-family: HelveticaNeueCyr; 
	line-height: 26px; 
	font-size: 20px; 
	letter-spacing: 0.4px; 
	color: #333333; 
 
}

	<div class="who-list"> 
			 
		<div class="who-list-wrap"> 
			<div class="who-list_item"> 
				<div class="who-list_item-icon"><img src="img/who/1.jpg" alt=""></div> 
				<div class="who-list_item-content"> 
					<h4 class="who-list_item-title">Для руководителей предприятий</h4> 
					<p class="who-list_item-desc"> 
						Комплексный анализ контрагента, его ответственности и поведения на рынке позволит Вам заключать договоры только с надёжными компаниями и защитит от осечек при выборе партнёров 
					</p> 
				</div> 
			</div> 
 
		 
			<div class="who-list_item"> 
				<div class="who-list_item-icon"><img src="img/who/2.jpg" alt=""></div> 
				<div class="who-list_item-content"> 
					<h4 class="who-list_item-title">Для отделов продаж</h4> 
					<p class="who-list_item-desc"> 
						Помогает найти потенциальных клиентов и проверить сферы их деятельности     . 
					</p> 
				</div> 
			</div> 
		</div> 
 
		<div class="who-list-wrap"> 
			<div class="who-list_item"> 
				<div class="who-list_item-icon"><img src="img/who/3.jpg" alt=""></div> 
				<div class="who-list_item-content"> 
					<h4 class="who-list_item-title">Для службы безопасности       </h4> 
					<p class="who-list_item-desc"> 
						Поможет выявить фирмы-однодневки, покажет аффилированность      . 
					</p> 
				</div> 
			</div> 
	 
 
 
	 
			<div class="who-list_item"> 
				<div class="who-list_item-icon"><img src="img/who/4.jpg" alt=""></div> 
				<div class="who-list_item-content"> 
					<h4 class="who-list_item-title">Для юристов</h4> 
					<p class="who-list_item-desc"> 
						Покажет арбитражную практику, сложившуюся в отношении фирмы-контрагента     . 
					</p> 
				</div> 
			</div> 
		</div> 
 
		<div class="who-list-wrap"> 
			<div class="who-list_item"> 
				<div class="who-list_item-icon"><img src="img/who/5.jpg" alt=""></div> 
				<div class="who-list_item-content"> 
					<h4 class="who-list_item-title">Для главных бухгалтеров</h4> 
					<p class="who-list_item-desc"> 
						Модуль поможет уменьшить налоговые риски     . 
					</p> 
				</div> 
			</div> 
 
			<div class="who-list_item"> 
				<div class="who-list_item-icon"><img src="img/who/6.jpg" alt=""></div> 
				<div class="who-list_item-content"> 
					<h4 class="who-list_item-title">Для тендерных отделов     </h4> 
					<p class="who-list_item-desc"> 
						Покажет информацию о торгах контрагента и их результатах     . 
					</p> 
				</div> 
			</div> 
		</div> 
 
		</div>

все, ответ снят,решил сделать ширину 50 процентов

Answer 1

Почему бы просто не прочитать про flexbox? В любом случае это можно сделать с помощью указания направления flexbox используя параметр flex-direction.

.wrapper 
{ 
  width: 100%; 
  height: 100vh; 
  display: flex; 
} 
 
.wrapper > .flex-wrapper 
{ 
  flex: 1 auto; 
  display: flex; 
  flex-direction: column; 
  margin: 10px; 
} 
 
 
.wrapper > .flex-wrapper > .flex-block 
{ 
  flex: 1 auto; 
  margin: 4px; 
  border: 2px solid #ccc; 
  border-radius: 2px; 
}

<div class="wrapper"> 
  <div class="flex-wrapper"> 
    <div class="flex-block"> 
    </div> 
    <div class="flex-block"> 
    </div> 
    <div class="flex-block"> 
    </div> 
  </div> 
  <div class="flex-wrapper"> 
    <div class="flex-block"> 
    </div> 
    <div class="flex-block"> 
    </div> 
    <div class="flex-block"> 
    </div> 
  </div> 
</div>