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

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:
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript