Teste de flexbox
A Pen by Emanuel Saramago on CodePen.
Teste de flexbox
A Pen by Emanuel Saramago on CodePen.
<div class="container"> | |
<div class="box"> | |
<div class="box-child">aaa</div> | |
<div class="box-child">bbb</div> | |
<div class="box-child">ccc</div> | |
</div> | |
<div class="box"> | |
<div class="box-child">aaa</div> | |
<div class="box-child">bbb</div> | |
<div class="box-child">ccc</div> | |
</div> | |
<div class="box"> | |
<div class="box-child">aaa aaaa</div> | |
<div class="box-child">bbb bbb</div> | |
<div class="box-child">ccc cccc</div> | |
<div class="box-child">ddddddd ddddddd</div> | |
<div class="box-child">eee eee</div> | |
<div class="box-child">fff fff</div> | |
</div> | |
</div> | |
<!-- GRID --> | |
<div class="grid-container"> | |
<div class="grid-col">aaa aaaa<br/>aaa aaa</div> | |
<div class="grid-col">bbb bbb</div> | |
<div class="grid-col">ccc cccc</div> | |
<div class="grid-col">ddddddd ddddddd</div> | |
<div class="grid-col">eee eee</div> | |
<div class="grid-col">fff fff</div> | |
</div> |
html, | |
body { | |
height: 100%; | |
margin: 0; | |
} | |
.container { | |
display: -webkit-box; | |
display: flex; | |
/*-webkit-box-orient: vertical; | |
flex-direction: column;*/ | |
-webkit-box-pack: center; | |
justify-content: center; | |
box-sizing: border-box; | |
height: 250px; | |
padding: 6px; | |
} | |
.box { | |
flex: 1; | |
display: flex; | |
padding: 6px; | |
margin: 6px; | |
background-color: tomato; | |
} | |
.box:first-child { | |
flex-direction: column; | |
} | |
.box:nth-child(2) { | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
} | |
.box:nth-child(3) { | |
flex-wrap: wrap; | |
align-items: center; | |
justify-content: center; | |
align-content: flex-start; | |
} | |
.box-child { | |
margin: 6px; | |
background-color: #EEE; | |
} | |
.box:first-child .box-child { | |
flex: 1; | |
} | |
.box:nth-child(2) .box-child { | |
width: 50px; | |
text-align: center; | |
} | |
.box:nth-child(3) .box-child { | |
padding: 6px; | |
} | |
/* GRID */ | |
.grid-container { | |
display: flex; | |
flex-wrap: wrap; | |
padding: 1%; | |
.grid-col { | |
box-sizing: border-box; | |
width: 23%; | |
border: 2px solid #888; | |
padding: 10px; | |
margin: 1%; | |
} | |
} |