@mrrangerr

Как сверстать такой блок на флексах?

Подскажите пожалуйста как лучше всего сверстать такой блок?
5f7c1a02dc6aa108517127.png
  • Вопрос задан
  • 205 просмотров
Решения вопроса 3
exorka
@exorka
Программист, админ, радиолюбитель
<style>
  .mainblock{
    display:flex;
	flex-flow:row;
	border:solid 2px #ff0000;
	align-content:center;
	justify-content:center;
  }
  
  .columnblock{
    display:flex;
	flex-flow:column;  
	border:solid 2px #00ff00;
  }
  
  .itemblock{
	width: 300px;
    display:flex;
	flex-flow:row;  
	align-content:center;
	justify-content:space-between;
	border:solid 2px #0000ff;
  }
  
  .itemtitle {
	display:flex;
	flex-flow:column;
	align-content:center;
	justify-content:center;	  
  }
  
  .itemicon {
	width:48px;
	display:flex;
	flex-flow:column;
	align-content:center;
	justify-content:center;	
	border:solid 2px #555555;
  }
  
  .itemicon img {
	height: 48px;
  }
  
</style>

<div class="mainblock">
  <div class="columnblock">
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
	
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
  </div>

  <div class="columnblock">
  
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
	
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
	
  </div>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@wasiliev96
Зачем усложнять. У вас список - верстайте списком.
Затем ставите:
ul.mylist{
columns: 2;
}

... и будет вам счастье. Поддержка IE10+
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы