CSS Flexbox Generator
A CSS Flexible Box Module, also known as Flexbox, is used to arrange elements inside a parent element in a dynamic and efficient manner.
Preview
1
2
3
4
5
Code
<div class="container">
<div class="child-1">1</div>
<div class="child-2">2</div>
<div class="child-3">3</div>
<div class="child-4">4</div>
<div class="child-5">5</div>
</div>CSS Code
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.child-1 {
flex: 0 1 auto;
width: 50px;
height: 50px;
background-color: #bc0111;
}
.child-2 {
flex: 0 1 auto;
width: 60px;
height: 60px;
background-color: #3df5ae;
}
.child-3 {
flex: 0 1 auto;
width: 70px;
height: 70px;
background-color: #f96210;
}
.child-4 {
flex: 0 1 auto;
width: 80px;
height: 80px;
background-color: #a400f0;
}
.child-5 {
flex: 0 1 auto;
width: 90px;
height: 90px;
background-color: #ffd60a;
}