CSS3 Flexible Box Layouts

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

Following is the code displaying flexible layouts using CSS3 −

Example

 Live Demo

<!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,
.container2 > div,
.container3 > div,
.container4 > 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;
}
.container3 {
   display: flex;
   flex-direction: column;
   background-color: rgb(168, 60, 10);
   width: 200px;
   align-items: center;
   margin: 20px;
}
.container4 {
   background-color: rgb(26, 10, 168);
   width: 200px;
   margin: 20px;
}
</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="container4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>

Output

The above code will produce the following output −

Updated on: 12-May-2020

77 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements