How to use Flex Property In CSS
The container div, named “flex-container” inside it, creates three divs for three items. Style the “flex-container” by using border, display: flex, and sets width and height. Use the flex: 1 and height: 90% properties on Flexbox items within a container and ensure each item takes up an equal share of available space.
Example: Illustration of Flexbox items the same size using the flex property.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <style> body { margin: 0; padding: 0; height: 100vh; background-color: #f0f0f0; display: flex; align-items: center; justify-content: center; } .main { width: 80%; height: 50%; margin: 0 auto; } h1 { text-align: center; font-size: 40px; color: green; } h2 { text-align: center; color: rgb(55, 0, 255); } .flex-container { border: 5px solid rgb(55, 139, 22); width: 100%; height: 75%; align-items: center; display: flex; } .flex-item { flex: 1; height: 90%; text-align: center; background-color: rgb(184, 233, 181); border: 1px solid #ccc; margin: 5px 10px; } </style> </head> <body> <div class="main"> <h1>w3wiki</h1> <h2> Using Flex Property for same size of Flexbox items </h2> <div class="flex-container"> <div class="flex-item"> Item 1 </div> <div class="flex-item"> Item 2 </div> <div class="flex-item align-right"> Item 3 </div> </div> </div> </body> </html> |
Output:
How to make Flexbox items the same size using CSS ?
Flexbox items of equal size in CSS ensure a uniform and visually unified layout. By using Flexbox properties, we can distribute available space evenly among items, allowing different content sizes to flow seamlessly. We can achieve the same size of the flexbox items by using different ways including, Flex Property, width property, and calc() Property.
Table of Content
- Using Flex Property
- Using Width Property
- Using calc() property
- Using Grid Property