This write-up will assist you in understanding the below-listed aspects of the CSS flexbox items:
- Flexbox Items in CSS
- Flexbox Items Properties in CSS
- How to implement Flexbox Items Properties in CSS
So, let’s begin!
Flexbox Items in CSS
While creating the flex container in the flexbox, we utilize the display property and assign some value to it, such as flex, inline. At that time, the direct child of that flex container becomes the flex item. The figure given below will provide a better understanding:
Flexbox Items Properties in CSS
The below table will provide you with a brief overview of flexbox properties:
| Properties | Description |
|---|---|
| order | It controls the order of child elements within the flex container. |
| flex-grow | It determines the growth factor for a flex item. |
| flex-shrink | It determines the shrink factor for a child element/flex item. |
| flex-basis | It determines the initial size of a child element/flex item. |
| flex | It is a shorthand property for three properties flex-grow, flex-shrink, and flex-basis. |
| align-self | It enables default alignment(along cross-axis) to be overridden for individual child element/flex items. |
How to implement Flexbox Items Properties in CSS
In this section, we will discuss each flexbox property mentioned above and implement them practically for a profound understanding:
Example 1: CSS order Property
It takes a numeric value to sort the elements in a specific order. The below code snippet will let you understand how the order property works in a Flexbox:
In the above code snippet, we utilized the order property to arrange the flexbox items according to our choice:
The output shows that the order property arranged the flex items according to the user-specified order.
Example 2: CSS flex-grow Property
It takes a numeric value that represents how fast a flex item will grow compared to the other flex items. For the clarity of concepts, let’s consider the below piece of code:
<head>
<style>
.container-class {
display:flex;
background-color: gray;
align-items: stretch;
}
.container-class > div {
background-color: lightgreen;
margin: 8px;
padding: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<h3>flex-grow Property</h3>
<div class="container-class">
<div>First Item</div>
<div style="flex-grow: 12">Second Item</div>
<div>Third Item</div>
<div style="flex-grow: 12">Fourth Item</div>
<div>Fifth Item</div>
</div>
</body>
</html>
In this example, the default value for the flex-grow property is 0, so every container item will grow accordingly. However, the second and fourth items of the container will grow twelve-time faster than other items because these two items specified the value of the flex-grow property as 12:
The above snippet verified the working of flex-grow property.
Example 3: CSS flex-basis Property
In the below code snippet, we will implement the flex-basis property to set the size of second and fourth items of the container:
We set the value of flex-basis property as 150px for the second and fourth items. The above code will generate the following output:
Similarly, we can utilize the other flexbox item properties to achieve different functionalities.
Conclusion
The flex container or the parent element is a box/container that contains multiple flex items, while everything inside a flexbox container is called a flexbox item or child element. To create the flex container in the flexbox, we utilize the display property and assign it either flex or inline value; as a result, the direct child of that flex container becomes the flex item. In CSS, several properties are available to work with flexbox items, such as order controls the order of flexbox items, flex-grow determines the growth factor for the flex items, etc. This article covered several flexbox item properties and explained how to use them to achieve their functionalities.
