Flexbox Basics

5.1 Key Concepts of Flexbox

Flexbox (Flexible Box Layout) is a powerful CSS layout system that gives flexible and efficient ways to distribute space and align items within a container. Flexbox is super handy for creating complex layouts and responsive designs. Let's go over the basics of Flexbox, including creating Flex containers and elements, and using the display: flex; property.

Key Concepts of Flexbox

Flexbox consists of two main components:

• Flex Container: a parent element that contains Flex items.
• Flex Items: child elements inside the Flex container that are aligned and distributed according to Flexbox rules.

Flex Container

A Flex container is created using the display: flex; or display: inline-flex; property. The Flex container manages the positioning of its child elements (Flex items) and offers various ways to align and distribute them.

    
      .container {
        display: flex; /* or inline-flex */
      }
    
  

Example Usage:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Code Explanation:

• .container: Flex container created using display: flex;. Inside this container, items are aligned and distributed according to Flexbox rules
• .item: Flex items that are child elements of the Flex container

5.2 Flex Container Properties

The display: flex; property defines an element as a Flex container. The child elements of this container automatically become Flex items and start following Flexbox rules.

display: flex;

Creates a block-level Flex container. The Flex container behaves like a block element, taking up the entire available width of its parent element.

    
      .container {
        display: flex;
      }
    
  

display: inline-flex;

Creates an inline Flex container. The Flex container behaves like an inline element, taking up only the necessary width, and can be placed next to other inline elements.

    
      .inline-container {
        display: inline-flex;
      }
    
  

Example Usage:

    
      .inline-container {
        display: inline-flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

      <div class="inline-container">
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
      </div>
    
  

Code Explanation:

• inline-container — is a Flex container created using display: inline-flex; Inside this container, items are aligned and distributed according to Flexbox rules. The containers behave like inline elements and are placed next to each other.

5.3 Flex Item Properties

1. The flex property is a shorthand for setting flex-grow, flex-shrink, and flex-basis. It allows control over how Flex items grow and shrink to fill the available space.

Syntax:

    
      .element {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }
    
  

Example Usage:

    
      .item {
        flex: 1;
      }
    
  

2. The order property

The order property determines the order in which Flex items are laid out inside the Flex container. By default, all items have a value of order: 0;.

Values

Whole numbers. Items with lower values are placed before items with higher values.

Syntax:

    
      .element {
        order: value;
      }
    
  

Example Usage:

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item-1 {
        order: 2;
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-2 {
        order: 1;
        background-color: #2ecc71;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .item-3 {
        order: 3;
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    
  

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

Code Explanation:

• .item-1: has order: 2, so it will be placed after the item with order: 1
• .item-2: has order: 1, so it will be placed first
• .item-3: has order: 3, so it will be placed last

1

Task

Frontend SELF EN, level 17, lesson 1

Locked

Flex Container

Flex Container

Open

1

Task

Frontend SELF EN, level 17, lesson 1

Locked

Inline-Flex container

Inline-Flex container

Open