Space Distribution

9.1 The flex-grow Property

Flexbox has different tools to manage the distribution of space between elements inside a Flex container. The flex-grow, flex-shrink, and flex-basis properties play a key role in controlling the size and behavior of Flex items in various conditions. Now we'll take a closer look at each of these properties and how to use them.

The flex-grow property specifies how much a Flex item can grow to occupy available space in the container. The flex-grow value is a ratio that indicates how much the item can grow relative to other Flex items.

Values:

• An integer or fractional value
• Default value: 0 (the item does not grow)

Usage Example:

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

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

      .grow-1 {
        flex-grow: 1;
      }

      .grow-2 {
        flex-grow: 2;
      }
    
  

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

Code Explanation:

• .grow-1: these items have the value flex-grow: 1;, allowing them to grow evenly
• .grow-2: this item has the value flex-grow: 2;, allowing it to grow twice as much compared to items with flex-grow: 1;

9.2 The flex-shrink Property

The flex-shrink property defines the ability of a Flex item to shrink if space in the container is limited. The flex-shrink value is a ratio that indicates how much the item can shrink relative to other Flex items.

Values:

• An integer or fractional value
• Default value: 1 (the item can shrink)

Usage Example:

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

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

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }
    
  

    
      <div class="container">
        <div class="item shrink-0">Element 1</div>
        <div class="item shrink-1">Element 2</div>
        <div class="item shrink-1">Element 3</div>
      </div>
    
  

Code Explanation:

• .shrink-0: this item has the value flex-shrink: 0;, preventing it from shrinking
• .shrink-1: these items have the value flex-shrink: 1;, allowing them to shrink as needed

9.3 The flex-basis Property

The flex-basis property defines the initial size of a Flex item before distributing free space. It can be specified in various units such as pixels, percentages, and others.

Values:

• Length in various units (px, %, em, etc.)
• Default value: auto (size is determined by content)

Usage Example:

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

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

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }
    
  

    
      <div class="container">
        <div class="item basis-auto">Element 1</div>
        <div class="item basis-100px">Element 2</div>
        <div class="item basis-50percent">Element 3</div>
      </div>
    
  

Code Explanation:

• .basis-auto: this item has the value flex-basis: auto;, meaning its size is determined by content
• .basis-100px: this item has a fixed initial size of 100 pixels
• .basis-50percent: this item has an initial size of 50% of the container's width

9.4 Using Flex Properties

The flex property is a shorthand to set flex-grow, flex-shrink, and flex-basis. It allows you to manage all three aspects of space distribution in a single property.

Syntax:

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

Usage Example:

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

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

      .flex-1 {
        flex: 1 1 auto;
      }

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }
    
  

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

Code Explanation:

• .flex-1: this item has flex: 1 1 auto;, meaning it can grow and shrink evenly with other items, and its initial size is determined by content
• .flex-2: this item has flex: 2 1 100px;, meaning it can grow twice as much compared to items with flex-grow: 1;, can shrink, and has an initial size of 100 pixels
• .flex-3: this item has flex: 1 0 50%;, meaning it can grow but not shrink, and its initial size is 50% of the container's width

1

Task

Frontend SELF EN, level 17, lesson 5

Locked

Using flex-grow

Using flex-grow

Open

1

Task

Frontend SELF EN, level 17, lesson 5

Locked

Using flex-shrink

Using flex-shrink

Open