Bulma Flex grow and flex shrink

Last Updated : 28 Feb, 2022

Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.

In this article, we will learn about Bulma flex-grow and flex-shrink properties. The Bulma framework allows the users to use CSS flex-shrink and flex-grow properties in a container. Flex-grow tells whether the flex item can get extra space or not whereas flex-shrink deals with the space not needed by flex items.

Bulma Flex classes:

is-flex-grow-0: This class is used to specify how much the flex item will grow relative to the rest of the flex items inside the same container.
is-flex-shrink-0: This class is used to specify how the flex item will shrink relative to the rest of the flex items inside the same container.

Syntax:

Flex-grow:

<div class="columns">
    <div class="column is-flex-grow-2">Flex item</div>
    <div class="column">Second flex item</div>
    ...
</div>

Flex-shrink:

<div class="columns">
    <div class="column is-flex-shrink-2">Flex item</div>
    <div class="column">Second flex item</div>
    ....
</div>

Example: Below example illustrates the Bulma flex-grow and flex-shrink property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" /> 
      
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
  </head> 
  <body> 
    <div class="container content has-text-centered"> 
      <h1 class="title has-text-success"> 
        GeekforGeeks 
      </h1> 
      <h2 class="subtitle has-text-info"> 
        Bulma Flex-grow and Flex-shrink 
      </h2> 
  
      <!-- Flex-grow property -->
      <div class="columns has-background-success"> 
        <div class="m-4 column is-flex-grow-5  
                    has-background-warning"> 
          Flex item 
        </div> 
        <div class="m-4 column has-background-warning"> 
          Second flex item 
        </div> 
        <div class="m-4 column has-background-warning"> 
          Third flex item 
        </div> 
      </div> 
  
      <br/> 
  
      <!-- Flex-shrink property -->
      <div class="columns"> 
        <div class="column is-full has-background-danger"> 
          Flex item 
        </div> 
        <div class="column is-flex-shrink-1 has-background-success"> 
          Second flex item 
        </div> 
      </div> 
    </div> 
  </body> 
</html> 