Flexbox

by Jim Qi

HTML

<div>
<div class="flex-container">
  <div id="flex-child-1">
    2x
  </div>
  <div id="flex-child-2">
    static width
  </div>
  <div id="flex-child-3">
    1x
  </div>
</div>
</div>

CSS

.flex-container {
  display: flex;
  width: 400px;
  height: 50px;
  background-color: lightgrey;
}

.flex-container > * {
  display: flex;
  justify-content: center;
  align-items: center;
}

#flex-child-1 {
  flex: 2 0 0;
  background-color: lightblue;
  overflow: hidden;
}

#flex-child-2 {
  flex: 0 0 200px;
  background-color: lightgreen;
}

#flex-child-3 {
  flex: 1 0 0;
  background-color: lightyellow;
  overflow: hidden;
}