CSS flex

by AlexMM

HTML

<div class="horizontal-layout">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

<br>

<div class="vertical-layout">
  <div>Content 1</div>
  <div id="second">Content 2</div>
  <div>Content 3</div>
</div>

CSS

div {
  border: 1px solid black;
}

.horizontal-layout {
  display: flex;
  flex-direction: row; /* main axis direction (default: row) */
  justify-content: space-between; /* main axis distribution */
  align-items: center; /* cross axis alignment */
  height: 100px;
}

.vertical-layout {
  display: flex;
  flex-direction: column; /* main axis direction (default: row) */
  height: 100px;
}

/* Customize region for children on main axis */
.vertical-layout > div#second {
  flex: 1;
}