Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS flex container properties
The CSS flex container properties control the layout and alignment of flex items within a flex container. These properties are applied to the parent element (flex container) to define how child elements (flex items) are arranged and distributed.
Syntax
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
Flex Container Properties
| Property | Description |
|---|---|
flex-direction |
Defines the main axis direction of flex items |
flex-wrap |
Controls whether flex items wrap to new lines |
flex-flow |
Shorthand for flex-direction and flex-wrap |
justify-content |
Aligns items along the main axis |
align-items |
Aligns items along the cross axis |
align-content |
Aligns wrapped lines along the cross axis |
Example: Basic Flex Container
The following example demonstrates a flex container with common properties −
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
height: 150px;
border: 2px solid #333;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
Three green flex items are displayed horizontally with equal spacing between them, centered vertically within a bordered container.
Example: Flex Direction and Wrap
This example shows how flex-direction and flex-wrap work together −
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
background-color: #e9e9e9;
padding: 20px;
border: 2px solid #666;
}
.flex-item {
background-color: #2196F3;
color: white;
padding: 15px 25px;
text-align: center;
border-radius: 5px;
min-width: 120px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
</div>
</body>
</html>
Five blue flex items are arranged horizontally and will wrap to new lines if the container width is insufficient, with items centered within the container.
Conclusion
CSS flex container properties provide powerful control over layout and alignment. These six properties work together to create flexible, responsive layouts that adapt to different screen sizes and content requirements.
Updated on: 2026-03-15T13:05:22+05:30
240 Views
Advertisements