0

Всем привет,сейчас будет ОЧЕНЬ ТУПОЙ вопрос. за случился затык. как расположить 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 процентов

1 ответ 1

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.