HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Flexbox

Flexbox (Flexible Box Layout)

Flexbox is a one-dimensional layout model designed to distribute space along a single row or column. It makes aligning items vertically and horizontally incredibly easy.

The Flex Container (Parent)

Triggered by display: flex;. Properties applied to the parent:

flex-direction: row, column.
justify-content: Aligns items on the main axis (center, space-between, space-around).
align-items: Aligns items on the cross axis (center, stretch).
flex-wrap: Allows items to wrap to a new line if they run out of space.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    h3 { margin-bottom: 5px; }
    
    .flex-container {
      display: flex;
      background-color: #2c3e50;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 30px;
      height: 120px; /* Give it height to test vertical alignment */
    }
    
    .item {
      background-color: #3498db;
      color: white;
      padding: 15px 30px;
      margin: 10px;
      font-weight: bold;
      font-size: 20px;
      border-radius: 5px;
    }
    
    /* Example 1 */
    .center-center {
      justify-content: center; /* Horizontal Center */
      align-items: center;     /* Vertical Center */
    }
    
    /* Example 2 */
    .space-between {
      justify-content: space-between; /* Pushes items to edges */
      align-items: flex-end;          /* Aligns items to the bottom */
    }
  </style>
</head>
<body>

<h3>Perfect Centering (Both Horizontal & Vertical)</h3>
  <div class="flex-container center-center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

<h3>Space-Between & Align-End</h3>
  <div class="flex-container space-between">
    <div class="item">Logo</div>
    <div class="item">Links</div>
    <div class="item">Profile</div>
  </div>

</body>
</html>

Result

Topics