CSS display: flex property
The display: flex property in CSS is used to create a flexible box layout, known as Flexbox. This layout model allows you to design complex and responsive layouts more easily than traditional methods like floats or inline-block. Flexbox provides a way to distribute space and align items within a container in a more predictable and efficient manner.
Basic Usage
The basic syntax for the display: flex property is:
selector {
display: flex;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 1px solid black;
}
.item {
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the .container uses display: flex, which makes the .item elements inside it flex items. This means they will be laid out according to Flexbox rules.
Key Concepts
1. Flex Container
When you set display: flex on a container, it becomes a flex container. The direct children of this container become flex items.
.container {
display: flex;
}
2. Flex Items
The elements inside a flex container are called flex items. Their layout is controlled by various flexbox properties.
.item {
/* Flex items */
}
3. Main Axis and Cross Axis
- Main Axis: The primary axis along which flex items are laid out. By default, it is horizontal (left to right), but it can be changed with the
flex-directionproperty. - Cross Axis: The axis perpendicular to the main axis. By default, it is vertical (top to bottom).
4. Flex Direction
The flex-direction property determines the direction of the main axis. It can have the following values:
row(default): Items are laid out horizontally from left to right.row-reverse: Items are laid out horizontally from right to left.column: Items are laid out vertically from top to bottom.column-reverse: Items are laid out vertically from bottom to top.
.container {
display: flex;
flex-direction: row; /* or row-reverse, column, column-reverse */
}
5. Flex Wrap
The flex-wrap property controls whether flex items should wrap onto multiple lines or stay on a single line:
nowrap(default): Flex items are placed on a single line.wrap: Flex items wrap onto multiple lines if needed.wrap-reverse: Flex items wrap onto multiple lines in reverse order.
.container {
display: flex;
flex-wrap: wrap; /* or nowrap, wrap-reverse */
}
6. Flex Flow
The flex-flow property is a shorthand for flex-direction and flex-wrap:
.container {
display: flex;
flex-flow: row wrap; /* or column nowrap, etc. */
}
7. Justify Content
The justify-content property aligns flex items along the main axis:
flex-start(default): Aligns items to the start of the container.flex-end: Aligns items to the end of the container.center: Centers items within the container.space-between: Distributes items with equal space between them.space-around: Distributes items with equal space around them.space-evenly: Distributes items with equal space around and between them.
.container {
display: flex;
justify-content: center; /* or flex-start, flex-end, space-between, space-around, space-evenly */
}
8. Align Items
The align-items property aligns flex items along the cross axis:
stretch(default): Stretches items to fill the container.flex-start: Aligns items to the start of the cross axis.flex-end: Aligns items to the end of the cross axis.center: Centers items within the container along the cross axis.baseline: Aligns items along their baseline.
.container {
display: flex;
align-items: center; /* or stretch, flex-start, flex-end, baseline */
}
9. Align Content
The align-content property aligns flex lines within the flex container along the cross axis. This is used when there is extra space in the cross axis due to wrapping:
stretch(default): Stretches flex lines to fill the container.flex-start: Aligns flex lines to the start of the container.flex-end: Aligns flex lines to the end of the container.center: Centers flex lines within the container.space-between: Distributes flex lines with equal space between them.space-around: Distributes flex lines with equal space around them.
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* or stretch, flex-start, flex-end, center, space-around */
}
10. Align Self
The align-self property allows individual flex items to override the container’s align-items value:
auto(default): Inherits thealign-itemsvalue from the container.flex-start: Aligns the item to the start of the cross axis.flex-end: Aligns the item to the end of the cross axis.center: Centers the item within the container along the cross axis.baseline: Aligns the item along its baseline.stretch: Stretches the item to fill the container.
.item {
align-self: flex-end; /* or auto, flex-start, center, baseline, stretch */
}
Practical Examples
Example 1: Basic Flexbox Layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.item {
background-color: lightblue;
padding: 20px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the .container uses display: flex, and the items are evenly spaced around the container, centered vertically.
Example 2: Flex Wrap and Align Items
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 300px;
}
.item {
background-color: lightcoral;
padding: 20px;
margin: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>
Here, the .container uses flex-wrap: wrap to allow items to wrap onto multiple lines, and align-items: flex-start aligns items to the start of the cross axis.