What is CSS Flexbox?

CSS Flexbox is a layout module that allows you to design complex layouts using simple, flexible boxes. It helps in distributing space dynamically across elements in a container.

Key Flexbox Properties

• display: flex; — This makes the container a flex container.
• flex-direction — Defines the direction of the flex items.
  • row (default) — Items align horizontally.
  • column — Items align vertically.
• justify-content — Aligns items along the main axis (horizontal by default).
  • flex-start, center, space-between, space-around, space-evenly
• align-items — Aligns items along the cross axis (vertical).
  • stretch, flex-start, center, flex-end

Example of Flexbox Layout

        
          .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 100vh;
          }

          .item {
            width: 30%;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
          }
        
      

        
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  

      

This example creates a simple flex container with three items that are evenly spaced and aligned.