Section 4

THE 3 WAYS OF BUILDING LAYOUTS WITH CSS

1. Float layouts

It’s old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated fast.

2. Flexbox

Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts.

3. CSS Grid

For laying out element in a fully-fleged 2-dimensional grid. Perfect for page layouts and complex components.

BOX MODEL WITH BOX-SIZING

Final element width = right border + right padding + width + left padding + left border

Final element height = topborder + top padding + height+ bottom padding + bottom border

BORDER-BOX

Final element width = width

Final element height = height

Flexbox

• Flexbox - a set of related css properties for building 1-dimensional layouts.
• The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements.