CSS Layouts

Flexbox Layout

For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like floats and positioning. These are fine, and they work, but in some ways they are also rather limiting and frustrating.

Flexbox

    For Flexibility ( Read More Advantages > )
  • Vertically centering a block of content inside its parent.
  • Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
  • Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.

Grid

    For Flexibility (Read More >>>)
  • Vertically centering a block of content inside its parent for 2D-grid.

Floats

    For Flexibility (Read More >>>)
  • Vertically centering a block of content inside its parent.
  • Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
  • Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.