Layout

Flexbox Alignment

Flexbox has two axes. In a row, the main axis is horizontal and the cross axis is vertical.

Property	Aligns along	Common values
`justify-content`	Main axis	`flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`
`align-items`	Cross axis	`stretch`, `flex-start`, `center`, `flex-end`, `baseline`

Perfect centring

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Logo left, links right

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Item properties

.search { flex: 1; }        /* grow to fill the free space */
.logo { flex-shrink: 0; }   /* never shrink */
.ad { align-self: flex-end; } /* align just this item */
.first { order: -1; }       /* move it to the start */