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

Question

[mrrangerr]

Подскажите пожалуйста как лучше всего сверстать такой блок?

Answer 1

[Erl]

https://codepen.io/kaparov/pen/ZEOzxzG

Comments

[mrrangerr]

Спасибо!!

Answer 2

[Воващ]

Answer 3

[Егор]

<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>

Answer 4

[wasiliev96]

Зачем усложнять. У вас список - верстайте списком.
Затем ставите:

ul.mylist{
columns: 2;
}

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