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

Properties

Container
Child 1 properties

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