Flex Items Properties

Flex-items are the child containers inside a flex-container. These items get bounded by the rules set by flex-container but they also have some properties that gives them the power to override the defaults. Let's see the flex-item properties one by one.


Order of Flex-Items

You can set order of display for the individual flex-items. By default, the items are ordered according to their source code but in a flexbox this order can be changed. For example, an item which is added in the last, inside a flexbox can be displayed in the start by using order property.

The default order property for the flex items is 0. The order property accept integer values. Any item with a lower order value than the other will be before the other items.

Note: If you give similar order to some flex-items, then also, those items will be displayed according to the source code.

Look at the example below to see how it works:



<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: #f1f1f1; } .flex-items { background-color: Tomato; color: white; width: 100px; margin: 10px; text-align: center; height: 50px; font-size: 25px; } </style> </head> <body> <h1>Order Property</h1> <p>The order property gets applied to flex-items. Notice the order of flex-items according to their specified order.</p> <div class="flex-container"> <div style="order: 4" class="flex-items">1</div> <div style="order: 2" class="flex-items">2</div> <div style="order: 1" class="flex-items">3</div> <div style="order: 3" class="flex-items">4</div> </div> </body> </html>

Output

Order Property

The order property gets applied to flex-items. Notice the order of flex-items according to their specified order.

1
2
3
4

Flex Grow Property

The Flex-grow property specify the amount of space a flex-item would take as compared to other flex-items. This property works when there is some extra space left in the flex-box. By default, the flex-grow value of all items is 0.

If we assign a value of 1 to a flex-item, then it will grow faster than other elements.

Suppose, there are two flex-items with flex-grow:1;, now both will take the same amount of space when they grow. But if you assign flex-grow:2; to one item, then that item will grow twice the size of the other item during exapansion of flexbox. Look at the example below:


<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: #f1f1f1; } .flex-items { background-color: Tomato; color: white; width: 100px; margin: 10px; text-align: center; height: 75px; font-size: 30px; } </style> </head> <body> <h1>Flex-grow Property</h1> <p>Notice that the 1st item is bigger than 3rd and 4th but the 2nd item is bigger than than the 1st item. This is because of their flex-grow properties. </p> <div class="flex-container"> <div style="flex-grow:1; " class="flex-items">1</div> <div style="flex-grow:2 ;" class="flex-items">2</div> <div class="flex-items">3</div> <div class="flex-items">4</div> </div> </body> </html>

Output

Flex-grow Property

Notice that the 1st item is bigger than 3rd and 4th but the 2nd item is bigger than than the 1st item. This is because of their flex-grow properties.

1
2
3
4

Flex Shrink Property

The Flex-shrink property works similar to Flex-grow but it shrinks the items. It specifies how much a flex-item will get shrink(if necessary) as compared to other flex-items, during flexbox shrinking.


<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: #f1f1f1; } .flex-items { background-color: Tomato; color: white; width: 200px; margin: 10px; text-align: center; height: 75px; font-size: 30px; } </style> </head> <body> <h1>Flex-shrink Property</h1> <p>If you shrink the viewport then the 2nd item will shrink faster than other items. This is because of its flex-shrink property. </p> <div class="flex-container"> <div class="flex-items">1</div> <div style="flex-shrink:2;" class="flex-items">2</div> <div class="flex-items">3</div> <div class="flex-items">4</div> </div> </body> </html>

Output

Flex-shrink Property

If you shrink the viewport then the 2nd item will shrink faster than other items. This is because of its flex-shrink property.

1
2
3
4

Flex Basis Property

Flex-basis is used to define the initial size of a flex-item. In flex-direction:row, it sets the width of flex-item but in flex-direction:column;, it sets the height. SO it works for both height and width as per given flex-direction.

Although same work can be done using height and width but it is recommended to use flex-basis on flex-items. As it is specific to flex-box and it can be used in the shorthand property flex. Whereas the height and width properties cannot be set using shorthand.


<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: #f1f1f1; } .flex-container2 { display: flex; flex-direction: column; background-color: #f1f1f1; } .flex-items { background-color: Tomato; color: white; width: 200px; margin: 10px; text-align: center; height: 75px; font-size: 30px; } </style> </head> <body> <h1>Flex-basis Property</h1> <h2>Flex direction Row</h2> <p>Here, the flex-basis is working as initial width of the first flex-item.</p> <div class="flex-container"> <div style="flex-basis:300px;" class="flex-items">1</div> <div class="flex-items">2</div> <div class="flex-items">3</div> <div class="flex-items">4</div> </div> <h2>Flex direction Column</h2> <p>Here, the flex-basis is working as initial height of the first flex-item.</p> <div class="flex-container2"> <div style="flex-basis:200px;" class="flex-items">1</div> <div class="flex-items">2</div> <div class="flex-items">3</div> <div class="flex-items">4</div> </div> </body> </html>

Output

Flex-basis Property

Flex direction Row

Here, the flex-basis is working as initial width of the first flex-item.

1
2
3
4

Flex direction Column

Here, the flex-basis is working as initial height of the first flex-item.

1
2
3
4

Flex Self Property

Align Self property is used by flex-items to override the align value set by the container. For example, there are 3 flex-items with align-items:center; and if we add align-self:flex-start; in the first flex-item, then it will gets placed at the flex start but all other flex-items will be centered.

Note: The values used by align-self are flex-start | flex-end | center | stretch | baseline |

Let's look at a simple example:


<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: #f1f1f1; height: 400px; align-items: center; } .flex-items { background-color: Tomato; color: white; width: 200px; margin: 10px; text-align: center; height: 75px; font-size: 30px; } </style> </head> <body> <h1>Align-Self Property</h1> <p>Here, the first flex-item is aligned at flex-start but all other are centered.</p> <div class="flex-container"> <div style="align-self:flex-start;" class="flex-items">1</div> <div class="flex-items">2</div> <div class="flex-items">3</div> <div class="flex-items">4</div> </div> </body> </html>

Output

Align-Self Property

Here, the first flex-item is aligned at flex-start but all other are centered.

1
2
3
4

Flex Shorthand Property

The Flex property is shorthand for flex-shrink, flex-grow and flex-basis. The syntax for flex is:

Syntax
flex: <flex-grow> <flex-shrink> <flex-basis>;

Example- flex: 2 2 200px;


Let's look at a example:


<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; align-items: stretch; background-color: #f1f1f1; } .flex-items { background-color: Tomato; color: white; width: 100px; margin: 10px; text-align: center; height: 75px; font-size: 30px; } </style> </head> <body> <h1>Flex Property</h1> <p>The second flex item won't grow or shrink as both values are 0 and has a initial width of 150px.</p> <div class="flex-container"> <div class="flex-items">1</div> <div style="flex: 0 0 150px" class="flex-items">2</div> <div class="flex-items">3</div> <div class="flex-items">4</div> </div> </body> </html>

Output

Flex Property

The second flex item won't grow or shrink as both values are 0 and has a initial width of 150px.

1
2
3
4

Here, the flex properties are finished. Please continue the CSS tutorial to learn some more outstanding properties.



Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »