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.
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.
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.
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.
Flex direction Column
Here, the flex-basis is working as initial height of the first flex-item.
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.
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.
Here, the flex properties are finished. Please continue the CSS tutorial to learn some more outstanding properties.