How to set the size of specific flex-item using CSS?

Last Updated : 23 Apr, 2021

CSS provides Flexible box layout module, also known as flexbox, which makes it easier to design flexible responsive layout. To start using a flexbox model, we need to first define a flex container and the direct child elements of the container are called flex items.

Flex has following pre-defined properties in order to change the size of the flex items.

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Syntax:

flex-item: order | flex-grow | flex-shrink | 
           flex-basis | auto | align-self | 
           flex | initial | inherit;

Sample code:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <style> 
    .flex-container { 
        display: flex; 
        background-color: #f1f1f1; 
        width: 50%; 
    } 
    .flex-container > div { 
        background-color: rgb(33, 246, 107); 
        color: "#000000"; 
        width: 100px; 
        margin: 15px; 
        text-align: center; 
        line-height: 75px; 
        font-size: 35px; 
    } 
  </style> 
</head> 
  
<body> 
  <div class="flex-container"> 
    <div>A</div> 
    <div>B</div> 
    <div>C</div> 
  </div> 
</body> 
  
</html>

Output:

1. order: This property can be used to specify the order of the flex items.

Example: Below code illustrates the use of flex order.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <style> 
    .flex-container { 
        display: flex; 
        background-color: #f1f1f1; 
        width: 50%; 
    } 
    .flex-container > div { 
        background-color: rgb(33, 246, 107); 
        color: "#000000"; 
        width: 100px; 
        margin: 15px; 
        text-align: center; 
        line-height: 75px; 
        font-size: 35px; 
    } 
  </style> 
</head> 
  
<body> 
  <div class="flex-container"> 
    <div style="order: 2">A</div> 
    <div style="order: 3">B</div> 
    <div style="order: 1">C</div> 
  </div> 
</body> 
  
</html>

Output:

2. flex-grow: This property can be used to specify how much an item can grow relative to other items in the container.

Example: Below code illustrates the use of flex-grow property value.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
  <style> 
    .flex-container { 
        display: flex; 
        background-color: #f1f1f1; 
        width: 80%; 
    } 
    .flex-container > div { 
        background-color: rgb(33, 246, 107); 
        color: "#000000"; 
        width: 100px; 
        margin: 15px; 
        text-align: center; 
        line-height: 75px; 
        font-size: 35px; 
    } 
  </style> 
</head> 
  
<body> 
  <div class="flex-container"> 
    <div style="flex-grow: 1">A</div> 
    <div style="flex-grow: 3">B</div> 
    <div style="flex-grow: 6">C</div> 
  </div> 
</body> 
    
</html>

Output:

3. flex-shrink: This property can be used to specify how a much an item can shrink relative to other items in the container. Its default value is 1.

Example: Below code illustrates the use of flex-shrink property value.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
  <style> 
    .flex-container { 
        display: flex; 
        background-color: #f1f1f1; 
        width: 50%; 
    } 
  
    .flex-container > div { 
        background-color: rgb(33, 246, 107); 
        color: "#000000"; 
        width: 100px; 
        margin: 15px; 
        text-align: center; 
        line-height: 75px; 
        font-size: 35px; 
    } 
  </style> 
</head> 
  
<body> 
  <div class="flex-container"> 
    <div>A</div> 
    <div style="flex-shrink: 0">B</div> 
    <div>C</div> 
    <div>D</div> 
    <div>E</div> 
    <div>F</div> 
  </div> 
</body> 
  
</html>

Output:

4. flex-basis: This property can be used to specify the initial length of an item in the flex container.

Example: Below code illustrates the use of flex-basis.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <style> 
    .flex-container { 
        display: flex; 
        background-color: #f1f1f1; 
        width: 50%; 
    } 
    .flex-container > div { 
        background-color: rgb(33, 246, 107); 
        color: "#000000"; 
        width: 100px; 
        margin: 15px; 
        text-align: center; 
        line-height: 75px; 
        font-size: 35px; 
    } 
  </style> 
</head> 
  
<body> 
  <div class="flex-container"> 
    <div>A</div> 
    <div style="flex-basis: 250px">B</div> 
    <div>C</div> 
  </div> 
</body> 
  
</html>

Output:

5. flex: This property is a compilation of flex-grow, flex-shrink and flex-basis. You can specify all the three properties within flex.

Example: Below code illustrates the use of flex.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <style> 
    .flex-container { 
      display: flex; 
      background-color: #f1f1f1; 
      width: 50%; 
    } 
    .flex-container > div { 
      background-color: rgb(33, 246, 107); 
      color: "#000000"; 
      width: 100px; 
      margin: 15px; 
      text-align: center; 
      line-height: 75px; 
      font-size: 35px; 
    } 
  </style> 
</head> 
  
<body> 
  <div class="flex-container"> 
    <div>A</div> 
    <div style="flex: 2 0 200px">B</div> 
    <div>C</div> 
  </div> 
</body> 
  
</html>

Output:

6. align-self: This property can be used to specify the alignment of the selected element. When defined, it overrides the alignment defined by the container. It takes values: center, flex-start or flex-end.

Example: Below code illustrates the use of flex align-self property value.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <style> 
    .flex-container { 
        display: flex; 
        background-color: #f1f1f1; 
        width: 50%; 
        height: 250px; 
    } 
    .flex-container > div { 
        background-color: rgb(33, 246, 107); 
        color: "#000000"; 
        width: 100px; 
        margin: 15px; 
        text-align: center; 
        line-height: 75px; 
        font-size: 35px; 
    } 
  </style> 
</head> 
  
<body> 
  <div class="flex-container"> 
    <div style="align-self: flex-start">A</div> 
    <div style="align-self: center">B</div> 
    <div style="align-self: flex-end">C</div> 
  </div> 
</body> 
  
</html>