Presented by Eric Meyer.

The Web prioritizes ubiquity over consistency.

History

  • Using tables for layout was a hack to work around the limitations of the existing markup of the time.
  • CSS 1 was not a layout system. It was meant to be used to change the appearance of content.
  • Floats were never intended to be used for layout. Meant to replace the align attribute of img elements.
  • Positioning was originally intended to be a layout system, but the implementation was less-than-perfect. Positioned elements couldn’t clear other elements. Floats could, which is how we ended up using floats for layout instead of positioning.

It is critical for us to see beyond the assumptions rooted in technical limitations that we’ve been making for years.

Layout

Flexbox

  • justify-content: space-between; (also space-around)
  • flex-wrap
  • display: flex; should be applied to the containing element. Child elements have a flex property with values such as auto and none.
  • last-child and other pseudo-elements care about markup order, not display order.
  • Alignment options: stretch, flex-start, flex-end, center, and baseline

Grids