This write-up will assist you in the following aspects of the CSS flexbox model:
- What is CSS Flexbox Layout Model
- What is a CSS Flex Container
- Features of Flexbox Model
- Basic Concept of CSS Flexbox Layout Model
- Flexbox Properties
- Examples
So, let’s begin!
What is CSS Flexbox Layout Model
It is a flexible layout module available in CSS3 that offers a simple and clear way to arrange flex elements inside a container. It assists us in designing the responsive layout.
What is a CSS Flex Container
In order to work with the flexbox Model, first we need to understand what a flex container is and to do so, let’s consider the below-given figure:
In the above snippet, the gray area represents a flex container while item 1, item 2, etc. are its items. So, we can say that the flex container is a box/container that can hold multiple flex items.
Features of Flexbox Model
The CSS flexbox layout model provides numerous features, some of them are listed below:
- In the CSS flexbox layout model, there are no floats.
- CSS Flexbox provides a responsive and mobile-friendly layout.
- The margins of the flex container don’t collapse with its content’s margins.
- Positioning the child element is very easy in the flexbox model.
- The element’s order can be changed easily without editing the source HTML.
Basic Concept of CSS Flexbox Layout Model
Some of the basic concepts of the CSS flexbox layout model are listed below:
- The CSS flexbox model has the ability to alter the element’s height and width to the best fit within the container’s available free space.
- Flexbox is direction-agnostic which means elements of the flexbox can be arranged horizontally as well as vertically depending upon the requirements.
Flexbox Properties
To design a responsive layout, a vast range of flex properties is available in CSS3 as described in the below-given tables:
Table-1
| Properties | Description |
|---|---|
| display | Determines the type of flex container, i.e., inline, block. |
| flex-direction | Specifies the direction of items within the container such as top-bottom, left-right, etc. |
| flex-wrap | Determines whether the items should be wrapped or not. |
| flex-flow | Provides the functionalities of both flex-wrap and flex-direction. |
| justify-content | It aligns the items/elements along the main-axis. |
| align-items | It aligns the elements along the cross axis. |
| align-content | It aligns the lines of the flex container. |
| gap | Explicitly controls the spaces between the flex items. |
Table-2
| 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 child elements/flex items. |
| flex-basis | It determines the default size of the child element/flex item. |
| flex | It is used to achive the functionalities of three properties i.e. flex-grow, flex-shrink, and flex-basis. |
| align-self | It enables default alignment(along the cross-axis) to be overridden for individual child element. |
The properties described in Table 1 are known as flex container or parent element properties, while those described in Table 2 are known as flex items or child element properties.
Examples
In this section, we will implement the above-described flexbox container and flexbox items properties practically.
<head>
<style>
.container-class {
display:flex;
background-color: red;
align-items: stretch;
flex-direction: row-reverse;
gap: 5px 50px;
}
.container-class > div {
background-color: pink;
margin: 8px;
padding: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<h2>Flexbox Example</h2>
<div class="container-class">
<div>First Item</div>
<div>Second Item</div>
<div style="flex-grow: 2">Third Item</div>
<div>Fourth Item</div>
<div>Fifth Item</div>
</div>
</body>
</html>
In the above code snippet, we utilized various flex container and flex item properties such as display, flex-direction, align-items, gap and flex-grow which will set the flex display, row-reverse direction, stretched alignment, 5px rows and 50px columns gap respectively, and the third item will grow two times faster than other elements:
The output verifies the working of CSS flexbox properties.
Conclusion
The CSS flexbox model offers an easy and clean way to arrange flexbox items inside a container. It provides numerous features such as responsive design, simple alignment of elements, etc. Moreover, numerous properties can be used to design and align the items in a better way, such as flex-direction, flex-wrap, align-items, order, flex-grow, etc. This article discussed the flexbox layout model, flex container, and their properties.
