« Previous Next »

Understanding Flexbox

What is Flexbox?

Flexbox, or the Flexible Box Layout, is a CSS layout model that allows you to design a layout structure more efficiently and predictably. It provides an easy way to align and distribute space among items in a container, even when their size is unknown or dynamic.

Why Use Flexbox?

  • Responsive Design: Flexbox simplifies the creation of responsive layouts that adapt to different screen sizes.
  • Alignment Control: It allows for easy vertical and horizontal alignment of elements.
  • Space Distribution: Flexbox can manage space distribution between items, ensuring that they fit within the container.
  • Order Control: Flexbox allows you to change the visual order of elements without altering the HTML.
  • Less Code: It reduces the need for complex CSS floats and positioning, leading to cleaner and more maintainable code.

Flex Code Examples

  
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
          <title>Flex Examples</title>
      </head>
      <body>
    
        <h2>Examples of Flexbox</h2>
            
            <!-- Example 1: Basic Flexbox Layout -->
            <h3>Basic Flexbox Layout</h3>
            <div class="flex-container mb-3">
                <div class="flex-example bg-light">Item 1</div>
                <div class="flex-example bg-primary text-white">Item 2</div>
                <div class="flex-example bg-secondary text-white">Item 3</div>
            </div>
        
            <!-- Example 2: Aligning Items -->
            <h3>Aligning Items</h3>
            <div class="d-flex justify-content-between align-items-center mb-3" style="height: 100px;">
                <div class="flex-example bg-warning">Align Top</div>
                <div class="flex-example bg-info">Align Center</div>
                <div class="flex-example bg-success">Align Bottom</div>
            </div>
        
            <!-- Example 3: Responsive Flexbox -->
            <h3>Responsive Flexbox</h3>
            <div class="d-flex flex-wrap">
                <div class="flex-example bg-danger" style="flex: 1 1 100px;">Responsive Item 1</div>
                <div class="flex-example bg-dark text-white" style="flex: 2 1 200px;">Responsive Item 2</div>
                <div class="flex-example bg-light" style="flex: 1 1 100px;">Responsive Item 3</div>
            </div>
        
            <!-- Example 4: Changing Order -->
            <h3>Changing Order</h3>
            <div class="d-flex">
                <div class="flex-example bg-success" style="order: 2;">Item A</div>
                <div class="flex-example bg-danger" style="order: 1;">Item B</div>
                <div class="flex-example bg-primary text-white" style="order: 3;">Item C</div>
            </div>
        
            <!-- Example 5: Justify Content -->
            <h3>Justify Content</h3>
            <div class="d-flex justify-content-around mb-3">
                <div class="flex-example bg-light">Justified Item 1</div>
                <div class="flex-example bg-primary text-white">Justified Item 2</div>
                <div class="flex-example bg-secondary text-white">Justified Item 3</div>
            </div>
        
        </div>      

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
      </body>
      </html>

Output Example

Examples of Flexbox

Basic Flexbox Layout

Item 1
Item 2
Item 3

Aligning Items

Align Top
Align Center
Align Bottom

Responsive Flexbox

Responsive Item 1
Responsive Item 2
Responsive Item 3

Changing Order

Item A
Item B
Item C

Justify Content

Justified Item 1
Justified Item 2
Justified Item 3
« Previous Next »