

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
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
<!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 −
- Related Questions & Answers
- Creating Layouts with Box-Sizing using CSS3
- CSS3 Box Width with Box-Sizing
- Text in Transparent Box using CSS3
- CSS2 sizing property vs CSS3 box sizing property
- HTML Layouts
- How to create CSS3 Box and Text Shadow Effects?
- Flexible nature of java.lang.object
- Form Layouts in Bootstrap
- What are the layouts of Shelving Buffers?
- Flexible Array Members in a structure in C
- Changing Layouts Based on Screen Size using CSS
- What are the layouts of the rename buffers?
- CSS3 Rounded corners
- CSS3 Resize Property
- CSS3 font combinations
Advertisements