After exploring flexbox for some time and finally grasping its potential, I wanted to share an example showcasing how simple it is to create flexible column layouts without the need for CSS hacks involving excessive margins and paddings.
I understand that some individuals may not be fond of flexbox for valid reasons, but this post aims to provide a clear explanation and a practical example for those looking to understand its basics at first glance...
Let's start with some HTML:
<div class="header">100 setup</div>
<div class="flexcontainer">
<div class="flexbox flex100">100</div>
</div>
<div class="header">75/25 setup</div>
<div class="flexcontainer">
<div class="flexbox flex75">75</div>
<div class="flexbox flex25">25</div>
</div>
<div class="header">50/50 setup</div>
<div class="flexcontainer">
<div class="flexbox flex50">50</div>
<div class="flexbox flex50">50</div>
</div>
<div class="header">33/33/33 setup</div>
<div class="flexcontainer">
<div class="flexbox flex33">33</div>
<div class="flexbox flex33">33</div>
<div class="flexbox flex33">33</div>
</div>
<div class="header">20/20/20/20 setup</div>
<div class="flexcontainer">
<div class="flexbox flex20">20</div>
<div class="flexbox flex20">20</div>
<div class="flexbox flex20">20</div>
<div class="flexbox flex20">20</div>
</div>
Next comes the CSS:
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
border:1px solid #3B3B3B;
background-color: #919191;
width:100%;
min-height:100px;
}
.flexbox {
margin:5px;
border:1px solid #F2F2F2;
background-color:#E3E3E3;
padding:5px;
}
.header {
font-size:0.75em;
font-family:verdana;
width:100%;
display:block;
line-height:20px;
}
.flex20 {
-webkit-flex: 4 0 0;
flex: 4 0 0;
}
.flex25 {
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
.flex33 {
-webkit-flex:3 0 0;
flex: 3 0 0;
}
.flex50 {
-webkit-flex:1 0 0;
flex: 1 0 0;
}
.flex75 {
-webkit-flex: 2 0 0;
flex: 2 0 0;
}
.flex100 {
-webkit-flex: 1 0 0;
flex: 1 0 0;
}
Feel free to check out this JSFiddle link for a live preview and testing experience