CSS Flexbox
The flexible box layout module or flexbox provides a way to design a flexible responsive layout without using float or positioning property. With the help of CSS flexbox, we can align the items horizontally or vertically using rows and columns.
It also makes the elements adjust their height and width automatically when they are used with different screen sizes and different display devices.
CSS Flexbox Properties
| S.No. |
Property |
Description |
| 1. |
display |
The display property defines which type of box is used for the HTML elements. |
| 2. |
flex-direction |
The flex-direction property defines the direction of flex items in a flex container. |
| 3. |
justify-content |
The justify-content property horizontally aligns the flex items when the items do not acquire all the space available on the main-axis. |
| 4. |
align-items |
The align-items property vertically aligns the flex items when the items do not acquire all the space available on the cross-axis. |
| 5. |
flex-wrap |
The flex-wrap property specifies whether the flex-item should wrap or not.
|
| 6. |
align-content |
The align-content property is used to modify the behavior of the flex-wrap property. |
| 7. |
flex-flow |
The flex-flow property is a shorthand property of flex-direction and flex-wrap. |
| 8. |
order |
The order property specifies the order of the flex items. |
| 9. |
align-self |
The align-self property is used to override the parent element's align-items property. |
| 10. |
flex |
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. |
Flex Container and Flex Item in CSS
The flex container is used to specify the properties of the parent element (container). To make the parent container flexible, we have to specify the CSS property display with value flex.
The flex items are used to specify the properties of the child element that are the direct child of the flex container. There can be any number of flex items within a flex container.
Example: Creating Flex item and Flex container using CSS
In the given example we have created a flex element with three flex items. We have specified the class .flex-container for the parent element and the class .flex-item for the direct child elements of the parent div. Then we have specified the CSS property display to flex. This makes the flex container flexible element and all the direct children of the flex container become flexible items.
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexbox</title>
<style>
.flex-container {
display: flex;
background-color:#eb8b0e;
}
.flex-item {
background-color: #e3df0b;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
Output:
As we can see in the output, the orange-colored part is the parent element or the flex container and the three small boxes inside it are the flex items.
Responsive Flexbox in CSS
We can make our flex layout responsive by adding media queries. The media queries are used to set different layouts for different screen sizes and devices.
Suppose, you want to create a multi-column layout. This multi-column layout is clearly visible on large screen devices but it will create a visibility problem for small screen devices. To overcome this problem, we need to create a one-dimensional layout for small screen sizes. To do so, we have to change the flex-direction from row to column at a specific breakpoint using media queries.
Example: Creating Responsive Flexbox using CSS
In this example, we have demonstrated how we can make our flexbox responsive by applying media queries.
Conclusion
In this lesson, we have learned how to create a flexible and responsive container using the CSS flex properties. We also learned how to add flex items within the flex container and how to make them responsive by applying CSS media queries.
