Why would you use flexbox instead of floats?
Last Updated :
24 May, 2021
Before we dive into flexbox vs float, we will understand about flexbox and float.
Flexbox is a css3 layout model that provides an easy and clean way to arrange items with a container.
These are the following reasons to use flexbox over floats.
- Positioning child elements becomes easier with flexbox.
- Flexbox is responsive and mobile-friendly.
- Flex container’s margins do not collapse with the margins of its content.
- We can easily change the order of elements on our webpage without even making changes in HTML.
These are the important concept of the flexbox model.
- Flexbox is a direction-agnostic layout model.
- Flexbox has the ability to alter an item’s width and height to best fit in its container’s available free space.
- Flex value applies for the display property of a container which is called flex container as well as the container’s contents or flex child.
- Flexbox has a list of important properties that are used to make a flexible container. They are flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content.
Example: In this example, we will explain the advantages of flex over the float. by explaining flex properties.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<style>
.flex-container {
height: 350px;
width: 600px;
border: 3px solid black;
}
.flex-items{
margin: 5px;
}
#one {
height: 100px;
width: 100px;
border: 5px solid green;
}
#two{
height: 100px;
width: 100px;
border: 5px solid green;
}
#three{
height: 100px;
width: 100px;
border: 5px solid green;
}
</style>
</head>
<body>
<div class="flex-container">
<div id="one"
class="flex-items">
</div>
<div id="two"
class="flex-items">
</div>
<div id="three"
class="flex-items">
</div>
</div>
</body>
</html>
|
Output: In this example, we applied display: flex property to the larger container to make it flexible.
In the above code, we can change the CSS code for the class .flex-container as given below.
Code snippet:
CSS
.flex-container {
display: flex;
height: 350px;
width: 600px;
border: 3px solid black;
}
|
Output: So we can see that after applying to flex property, it automatically arranges the child container in the horizontal direction which is its default value. We can change it as per the application’s need to arrange the child items.
CSS flex-direction Property: The flex-direction property is a sub-property of the flexible box layout module. It established the main axis of the flexible item.
Flex-direction has some values.
- flex-direction:column
- flex-direction:row
- flex-direction:column-reverse
- flex-direction:row-reverse
Code snippet: Just change the class properties of the class flex-container in the CSS part of the above HTML code. Similar changes are made in other snippets as well.
CSS
.flex-container {
display: flex;
flex-direction:column;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
Code snippet:
CSS
.flex-container {
display: flex;
flex-direction:row;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
Code snippet:
CSS
.flex-container {
display: flex;
flex-direction:column-reverse;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
Code snippet:
CSS
.flex-container {
display: flex;
flex-direction:row-reverse;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
CSS Flex-wrap property: Flex-wrap property is used for wrapping all the elements according to their parent container, from the above example if we reduce the width of the parent container without applying the wrap property, then it will squeeze the size of the child elements in order to maintain the flexibility of the container.
CSS Flex-flow property: Flex-flow property is not a single property. In this flex-direction and flex-wrap are combined, or we can say that it is a shorthand property for flex-direction and flex-wrap property.
CSS Justify-content property: Justify-content property is used for positioning alignment of the child elements.
Justify-content: start: Arrange all the child element from the start of the container
Code snippet: Only change the flex-container class of the CSS part in the first HTML code.
CSS
.flex-container {
display: flex;
justify-content:start;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
Justify-content: center: Place all the child element around the center of the container
Code snippet:
CSS
.flex-container {
display: flex;
justify-content:center;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
Justify-content: space-around: Put spaces between the child elements and spread them throughout the container.
Code snippet:
CSS
.flex-container {
display: flex;
justify-content:space-around;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
Justify-content: space-evenly: Arrange all the child elements with equally distributed spaces between them and keep them in the center of the parent container.
Code snippet:
CSS
.flex-container {
display: flex;
justify-content:space-evenly;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
Justify-content: space-between: Put spaces only between the child containers.
Code-snippet:
CSS
.flex-container {
display: flex;
justify-content:space-between;
height: 400px;
width: 600px;
border: 3px solid black;
}
|
Output:
These are the important concepts of floats.
- Float is a positioning layout model.
- Float only focus on how an element or item can float inside a container.
- Float can only place items on the right side or on the left side of the corresponding container.
- Float has no effect if the display is absolute.
- Float is best for small layout positioning.
- There are some properties of floats such as float:right, float:left, float:none, float:inherit, float:inline-start, float:inline-end, float:initial, float:unset
In conclusion, we can say that flexbox and floats are quite different features to achieve a good layout model. Using floats we are limited to place items left or right but using flexbox we can modify our models in all four directions. Flexbox is a new concept in CSS to achieve a responsive webpage with some important properties of flexbox. We should use flexbox over floats.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...