Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :