Flex tests

by Raul Bojalil

HTML

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div class="spacer">
  
  </div>
  <div class="right">
    RIGHT
  </div>
</div>

<div class="container2">
  <div class="left2">
    LEFT
  </div>
  <div class="right2">
    RIGHT
  </div>
</div>

CSS

.container {
  display: flex;
  background-color: blue;
  height: 100px;
  align-items: center;
   color: white
 }
 
 .container2 {
  display: flex;
  flex-wrap: wrap;
  background-color: blue;
  height: 100px;
  align-content: center;
  align-items: center;
   color: white
 }


.spacer {
  flex-grow: 1;
}

.left {
  background-color: red;
}

.right {
  background-color: green;
}

.left2 {
  text-align: center;
  flex: 1;
  background-color: red;
}

.right2 {
  text-align: center;
  flex: 2;
  background-color: green;
}