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
Advance CSS Layout with Flexbox
CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties −
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
Here are all the Flexbox examples in a single image. It uses the flex, flex-wrap, justify-content, align-items, etc. −
Style the Parent Container
We have styled the parent container here. The flex container becomes flexible by setting the display property to flex −
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: lightblue;
}
Flex Items
The parent container is having three containers i.e. flex items −
<div class="container1"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container2"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container3"> <div>1</div> <div>2</div> <div>3</div> </div>
Style Flex Item 1
The flex items are styled as the following, The align-self is set to flex-start so that the element is positioned at the beginning of the container −
.container1 {
align-self: flex-start;
display: flex;
background-color: rgb(71, 30, 255);
width: 200px;
margin: 20px;
}
.container1 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
Style Flex Item 2
The flex items are styled as the following. The jusitify-content is set to center to align the flex items at the center of the container −
container2 {
display: flex;
background-color: rgb(14, 126, 79);
width: 200px;
justify-content: center;
align-self: flex-start;
margin: 20px;
}
.container2 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
Style Flex Item 3
The flex items are styled as the following. The flex-direction is set to column so that the flexible items are displayed vertically as a column −
.container3 {
display: flex;
flex-direction: column;
background-color: rgb(168, 60, 10);
width: 200px;
align-items: center;
margin: 20px;
}
.container3 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
width: 20px;
font-size: 30px;
}
CSS Layout With Flexbox
Example
The following is the code for advance CSS layout with flexbox −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: lightblue;
}
.container1 {
align-self: flex-start;
display: flex;
background-color: rgb(71, 30, 255);
width: 200px;
margin: 20px;
}
.container1 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
.container2 {
display: flex;
background-color: rgb(14, 126, 79);
width: 200px;
justify-content: center;
align-self: flex-start;
margin: 20px;
}
.container2 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
font-size: 30px;
}
.container3 {
display: flex;
flex-direction: column;
background-color: rgb(168, 60, 10);
width: 200px;
align-items: center;
margin: 20px;
}
.container3 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 10px;
width: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Flex layout example</h1>
<div class="container">
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>
560 Views
