Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create LEFT-RIGHT Alignment of Containers with CSS Flex?
With flex, we can easily create left-right alignment of containers. The flexible items are displayed horizontally using the flex-direction property. The flexible items have a space between them since the justify-content is set to space-between. The following examples illustrate CSS flex property.
Align with Flex Direction
The div container is set to the flex value using the display property. The flex-direction allow the flex items to display horizontally −
flex-direction: row;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 2%;
padding: 15%;
align-self: center;
background: url("https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=stretch&w=600&q=80");
color: white;
}
div > div {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="container">
<div>Left</div>
<div>Right</div>
</div>
</body>
</html>
Align with Flex Flow
To align with flex flow, you need to know that it is a combination of the flex-direction and flex-wrap. The flex-direction is used to set the direction of the flex items whereas flex-wrap sets whether the flex items should wrap or not.
Here, the value for the flex-flow is column wrap i.e., the items are displayed vertically with flex-direction and wraps using value wrap −
flex-flow: column wrap;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
height: 250px;
display: flex;
flex-flow: column wrap;
padding: 2%;
background: url("https://images.unsplash.com/photo-1523830213227-f76e0415a976?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fDZzTVZqVExTa2VRfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=650&q=60") 0;
}
img {
margin: 2%;
width: 60px;
border-radius: 25%;
}
</style>
</head>
<body>
<div id="container">
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
<img src="https://images.unsplash.com/photo-1502989642968-94fbdc9eace4?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDZ8NnNNVmpUTFNrZVF8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" />
</div>
</body>
</html>
1K+ Views
