Flexbox Basic

by Rishi Gautam

HTML

<div class='parent'>
  <div class='child child1'></div>
  <div class='child child2'></div>
  <div class='child child3'></div>
</div>

<div class='spacer'></div>

<div class='parent2'>
  <div class='child child4'>
    <div class='child child4a'></div>
    <div class='child child4b'></div>
  </div>
  <div class='child child5'>
  </div>
</div>

CSS

.parent {
  height: 100px;
  padding: 2px;
  display: flex;
  background-color: #ddd;
  flex-direction: row;
}

.child {
  margin: 3px 3px 3px 3px;
  background-color: #ccc;
}

.child1 {
  flex: 1;
}

.child2 {
  flex: 2;
}

.child3 {
  flex: 3;
}

.spacer {
  margin: 5px 0px 5px 0px;
}

.parent2 {
  height: 100px;
  display: flex;
  background-color: #ddd;
  flex-direction: row;
}

.child4 {
  flex: 5;
  display: flex;
  flex-direction: column;
}

.child4a {
  flex: 1;
}

.child4b {
  flex: 1;
}

.child5 {
  flex: 1;
}