- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
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
Following is the code for advance CSS layout with flexbox −
Example
<!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>
Output
The above code will produce the following output −
- Related Articles
- CSS Flexbox Layout Module
- Flexbox layout losing proportions when reduced in size
- How to create a flexbox Layout in HTML?
- How to work with Flexbox elements in CSS?
- CSS Grid Layout
- Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)
- How to create a responsive blog layout with CSS?
- How to create a 2-column layout grid with CSS?
- How to create a 3-column layout grid with CSS?
- How to create a 4-column layout grid with CSS?
- How to create a mixed column layout grid with CSS?
- Controlling Table Layout using CSS
- Controlling Table Layout in CSS
- Setting a Fixed Width for Items in CSS Flexbox
- How to create a responsive zig zag (alternating) layout with CSS?

Advertisements