- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is CSS Flexbox?
As a beginner developer, learning about CSS flexbox is important. It also helps to make the responsive web design easy by optimizing the spaces of the element.
The CSS flexbox is a layout model that we can use to arrange the child items better. It also changes the flex items' dimensions if the flexbox's content is overflowing and tries to show all content of the web page.
Terminology of CSS Flexbox
In this section, we will learn about the basic terminology used while using the CSS flexbox layout.
Flex container − It is an HTML element for which we set the ‘display: flex’ to make it a flexbox.
Flex items − They are the items of the flexbox which we require to arrange properly using the flexbox properties.
Main axis − The main axis for the flexbox is left to right by default, but we can change it using the ‘flex-direction’ CSS property of the flexbox.
Cross axis − The cross axis is always perpendicular to the main axis.
Main size − It is the size of a particular dimension of the flexbox across the main axis.
Cross size − It is the size of the particular dimension of the flexbox across the cross-axis.
Properties of Flexbox
In the above section, we have learned the various terminologies we use with flexbox. Now, we will learn various CSS properties that we can use with flexbox via the table below.
| CSS property | Property values | Use of property |
|---|---|---|
| display | flex | It is used to make a container as a flexbox. |
| flex-direction | row | row-reverse | column | column-reverse | It is used to specify the direction of the main axis in the flexbox. |
| justify-content | flex-start | flex-end | center | space-between | space-evenly | space-around | It is used to align items along the main axis. |
| align-items | stretch | baseline | center | flext-start | flex-end | It is used to align items across the cross-axis. |
| order | <positive integer value> | It is used to specify the order of items. |
| align-self | flext-start | flex-end | auto | center | baseline | stretch | It is used to align an individual item along the cross-axis. |
| flex-wrap | nowrap | wrap | wrap-reverse | It controls whether items should wrap. |
| flex | <flex-grow> <flex-shrink> <flex-basis> | auto | initial | none | It specifies the flex-grow, flex-shrink and basis of the item. |
Now, let’s understand the flexbox via the examples below in which we have used the various properties of the flexbox.
Example 1
In the example below, we have created the ‘row’, ‘row-reverse’, ‘column’, and ‘column-reverse’ div elements. In every div element, we have added two child elements. Also, we have set the ‘display: flex’ to make all four div elements separate flexboxes.
In CSS, we have used the ‘flex-direction’ property with the value according to the class name of the div element. In the output, users can observe the direction of the child div elements.
<html>
<head>
<style>
.child {
width: 50px;
height: 50px;
background-color: red;
margin: 10px;
font-size: 2rem;
color: white;
}
.row,
.row-reverse,
.column,
.column-reverse {
display: flex;
width: 120px;
height: 120px;
background-color: blue;
margin: 10px;
}
.row {flex-direction: row; }
.row-reverse {flex-direction: row-reverse;}
.column {flex-direction: column;}
.column-reverse {flex-direction: column-reverse;}
</style>
</head>
<body>
<h3> Using the <i> flex-direction CSS property </i> of flexbox </h3>
<div class = "row">
<div class = "child"> 1 </div>
<div class = "child"> 2 </div>
</div>
<div class = "row-reverse">
<div class = "child"> 1 </div>
<div class = "child"> 2 </div>
</div>
<div class = "column">
<div class = "child"> 1 </div>
<div class = "child"> 2 </div>
</div>
<div class = "column-reverse">
<div class = "child"> 1 </div>
<div class = "child"> 2 </div>
</div>
</body>
</html>
Example 2
The example below demonstrates the use of the ‘justify-content’ CSS property. We have defined the container div element and added seven child div elements. After that, we have made the container into flexbox using the ‘display: flex’ CSS property.
Also, we have created the radio button for all values of the ‘justify-content’ CSS property. In JavaScript, we access the value of the selected radio button and change the value of the ‘justify-content’ property accordingly.
In the output, users can select various property values and observe the alignment changes.
<html>
<head>
<style>
.container {
width: 550px;
height: auto;
background-color: green;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h3> Using the <i> Justify-content CSS property </i> of flexbox </h3>
<div class = "container">
<div class = "item"> one </div>
<div class = "item"> two </div>
<div class = "item"> three </div>
<div class = "item"> four </div>
<div class = "item"> five </div>
<div class = "item"> six </div>
<div class = "item"> seven </div>
</div>
<input type = "radio" name = "justify" value = "space-between"> space-between
<input type = "radio" name = "justify" value = "space-around"> space-around
<input type = "radio" name = "justify" value = "space-around"> space-evenly
<input type = "radio" name = "justify" value = "flex-start" checked> flex-start
<input type = "radio" name = "justify" value = "flex-end"> flex-end
<input type = "radio" name = "justify" value = "center"> center
<script>
var radio = document.getElementsByName("justify");
var container = document.querySelector(".container");
for (var i = 0; i < radio.length; i++) {
radio[i].addEventListener("click", function () {
container.style.justifyContent = this.value;
});
}
</script>
</body>
</html>
Example 3
The below example demonstrates the use of the ‘align-itmes’ CSS property. It sets the flex items' alignment across the flexbox's cross-axis.
Here, we have created the radio buttons for all values of the ‘align-items’ CSS property, as in the second example. In JavaScript, we have used the forEach() and addEventListner() methods to add a 'change' event to every radio button.
Select any value to align items vertically in the output and observe the changes.
<html>
<head>
<style>
.container {
width: 450px;
height: 350px;
background-color: blue;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
font-size: 2rem;
text-align: center;
color: black;
}
</style>
</head>
<body>
<h3> Using the <i> align-items CSS property </i> of flexbox </h3>
<div class = "container">
<div class = "item"> one </div>
<div class = "item"> two </div>
<div class = "item"> three </div>
</div>
<input type = "radio" name = "align-items" value = "flex-start"> flex-start
<input type = "radio" name = "align-items" value = "flex-end"> flex-end
<input type = "radio" name = "align-items" value = "center" checked> center
<input type = "radio" name = "align-items" value = "baseline"> baseline
<input type = "radio" name = "align-items" value = "stretch"> stretch
<script>
var radioButtons = document.querySelectorAll('input[type="radio"]');
var container = document.querySelector('.container');
radioButtons.forEach(function (radioButton) {
// add event listener to each radio button
radioButton.addEventListener('change', function (event) {
container.style.alignItems = event.target.value;
});
});
</script>
</body>
</html>
Users learned about CSS flexbox in this tutorial. We have learned the terminology used with the flexbox, all flexbox-related CSS properties and its value using the table. In the examples, we have used the various flexbox property and learned how to optimise the container's space.
131 Views
