Flexbox Layout

Real sites arrange things in rows and grids. Flexbox is the layout tool professionals reach for first — one line turns a stack into a row.

display: flex

1. 1Three boxes

   Add a container div with three child divs.

   <div class="row">
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
   </div>

2. 2Make it a row

   Give .row display: flex and a gap.

3. 3Style the boxes

   Give each box padding, colour, and equal width with flex: 1.

4. 4Centre everything

   Add justify-content: center and align-items: center to .row.