Ответы пользователя по тегу CSS
  • Как сверстать такой блок на флексах?

    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>
    Ответ написан
    Комментировать