To create a flex container, set the display property of an HTML element to either flex or inline-flex .This makes the element a flex container, and its direct children become flex items.
display: flex;
This value creates a block-level flex container. The flex container will behave like a regular block-level element, taking up the full width available to it.
Example : Creating a block-level flex container
.container {
display: flex; /* Creates a block-level flex container */
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
margin: 5px;
padding: 15px;
text-align: center;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>In the above example, the div with the class container is now a flex container, and the div elements inside it with the class item are flex items. They will be laid out in a row by default. The container will take up the entire available width.
display: inline-flex;
This value creates an inline-level flex container. The flex container will behave more like an inline-block element, flowing inline with other inline elements and only taking up as much width as necessary to contain its flex items.
Example: Creating an inline-level flex container
.navigation {
display: inline-flex; /* Creates an inline-level flex container */
background-color: #e0e0e0;
padding: 5px;
}
.navigation a {
color: #555;
margin: 0 10px;
text-decoration: none;
}
<span class="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
</span>Here, the span with the class navigation is an inline-flex container. It contains a flex item that arranges itself in a row. The .navigation element itself will only be as wide as its content.
Flex Container Properties
flex-direction
This property describes the direction of the main axis in the flex container, determining the direction in which flex items are placed. The cross axis runs perpendicular to the main axis.
values:
- row (default): Flex items are placed side by side in a row from left to right (in LTR writing modes).
- column: Flex items are placed vertically in a column from top to bottom.
- row-reverse: Flex items are placed in a row from right to left (in LTR writing modes).
- column-reverse: Flex items are placed vertically in a column from bottom to top.
Example:
.container {
display: flex;
/* Try each of the following values */
/* flex-direction: row; */
/* flex-direction: column; */
/* flex-direction: row-reverse; */
flex-direction: column-reverse;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
margin: 5px;
padding: 15px;
text-align: center;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>flex-wrap
This property controls whether the flex container is single-line or multi-line. If items don’t fit on one line, flex-wrap determines if they should wrap to a new line.
values:
- nowrap (default): All flex items will be on one line, which might cause the container to scroll horizontally or items to shrink.
- wrap: Flex items will wrap onto multiple lines from top to bottom as needed.
- wrap-reverse: Flex items will wrap onto multiple lines from bottom to top.
Code Example:
.container {
display: flex;
flex-direction: row; /* Ensure items are in a row */
width: 300px; /* Limit container width to see wrapping */
/* Try each of the following values */
/* flex-wrap: nowrap; */
flex-wrap: wrap;
/* flex-wrap: wrap-reverse; */
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
width: 100px;
margin: 5px;
padding: 15px;
text-align: center;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>justify-content
This property defines how flex items are aligned along the main axis of the flex container. It distributes the space between and around flex items.
values:
- flex-start (default): Items are packed toward the start of the main axis.
- Flex-end: Packing occurs near the end of the main axis.
- centre: Items are centred along the main axis.
- space-between: The first item is at the start, and the last is at the end.
- The line distributes items evenly, leaving equal space around them. Note that, visually, the space between items will be twice the space at the end edges.
- space-evenly: Items are distributed so that there is an equal amount of space between any two adjacent items and between the outermost items and the edge of the containing block.
Code Example:
.container {
display: flex;
flex-direction: row; /* Ensure main axis is horizontal */
width: 400px; /* Give container some width to see distribution */
/* Try each of the following values */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
justify-content: space-between;
/* justify-content: space-around; */
/* justify-content: space-evenly; */
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
width: 80px;
margin: 5px;
padding: 15px;
text-align: center;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>align-items
This property defines how flex items are aligned along the cross axis of the flex container.
values:
- stretch (default): Flex items are stretched to fill the height of the container (or width if flex-direction is column).
- flex-start: Items are aligned to the start of the cross axis.
- flex-end: Items are aligned to the end of the cross axis.
- center: Items are centered along the cross axis.
- baseline: Items are aligned such that their baselines are aligned.
Code Example:
.container {
display: flex;
flex-direction: row; /* Ensure cross axis is vertical */
height: 200px; /* Give container some height to see alignment */
/* Try each of the following values */
/* align-items: stretch; */
/* align-items: flex-start; */
/* align-items: flex-end; */
align-items: center;
/* align-items: baseline; */
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
width: 80px;
margin: 5px;
padding: 15px;
text-align: center;
font-size: 1.2em; /* For better baseline demonstration */
}
.item:first-child {
font-size: 2em; /* For better baseline demonstration */
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>align-content
This property aligns the flex container’s lines within it when there is extra space in the cross axis. It has no effect when there is only one line of flex items (i.e., when flex-wrap: nowrap or when the items fit within the container’s cross-axis size).
values:
- stretch (default): Flex lines are stretched to take up the entire space of the cross axis.
- flex-start: Flex lines are packed at the start of the cross axis.
- flex-end: Flex lines are packed at the end of the cross axis.
- center: Flex lines are packed in the center of the cross axis.
- space-between: Flex lines are evenly distributed; the first line is at the start of the cross axis, and the last line is at the end.
- space-around: Flex lines are evenly distributed with equal space around each line.
- space-evenly: Flex lines are distributed with equal space around each line and between each line.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* Allow wrapping to create multiple lines */
width: 300px; /* Limit width */
height: 300px; /* Give container height to see alignment of lines */
/* Try each of the following values */
/* align-content: stretch; */
/* align-content: flex-start; */
/* align-content: flex-end; */
align-content: center;
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #ccc;
color: #333;
width: 100px;
margin: 5px;
padding: 15px;
text-align: center;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>gap
The gap property specifies the size of the gap (gutter) between flex items. It’s a shorthand property for row-gap and column-gap.
values:
- length: Specifies a fixed size for the gap (e.g., 10px). If one value is provided, it applies to both row and column gaps. If you provide two values, the first one represents the row-gap and the second one represents the column-gap (e.g., 10px 20px).
Code Example:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
background-color: #f0f0f0;
padding: 10px;
/* Try the following values */
/* gap: 10px; /* Both row and column gap */
gap: 10px 20px; /* 10px row gap, 20px column gap */
}
.item {
background-color: #ccc;
color: #333;
width: 80px;
height: 50px;
text-align: center;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>Flexbox container properties provide powerful tools for arranging and aligning elements in one dimension, making it easier to create flexible and responsive layouts. Remember that Flexbox is primarily for one-dimensional layouts (either rows or columns), while CSS Grid is better suited for two-dimensional layouts (rows and columns). However, you can effectively use them together.
CSS3 Topics