Flexbox CSS Guide
Flexbox CSS: The Complete Guide with Examples
Flexbox (Flexible Box Layout Module) is a powerful CSS layout module that provides an efficient way to arrange, align, and distribute space among items in a container, even when their size is unknown or dynamic. This guide will walk you through the key concepts and properties of Flexbox with clear explanations and practical examples.
1. Key Concepts
Flex Container: The parent element that you apply display: flex or display: inline-flex to. This makes the container a flexbox.
Flex Items: The direct children of the flex container. They become automatically arranged and styled according to the flexbox properties you set on the container.
Main Axis: The primary axis along which flex items are arranged. The direction depends on flex-direction.
Cross Axis: The axis perpendicular to the main axis.
Main Size: The width or height of a flex item along the main axis.
Cross Size: The width or height of a flex item along the cross axis.
2. Enabling Flexbox
The first step is to make an element a flex container. You do this by setting its display property to either flex or inline-flex.
display: flex;: The flex container is a block-level element (like <div>). It takes up the full width available in its parent container.
display: inline-flex;: The flex container is an inline-level element (like <span>). It takes up only as much width as its content requires.
Example:
<style>
.container-flex {
display: flex; /* Enable flexbox on the container */
background-color: #f0f0f0;
padding: 20px;
}
.item {
background-color: #ddd;
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
}
</style>
<div class="container-flex">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
In this example, .container-flex is the flex container, and .item elements are the flex items. Without any further flexbox properties, the items will arrange horizontally from left to right by default.
3. Flex Container Properties
These properties are applied to the flex container to control the layout of the flex items.
flex-direction: Defines the direction of the main axis, and therefore the direction in which the flex items are laid out.
row (default): Items are arranged horizontally from left to right.
row-reverse: Items are arranged horizontally from right to left.
column: Items are arranged vertically from top to bottom.
column-reverse: Items are arranged vertically from bottom to top.
Example:
.container-flex {
display: flex;
flex-direction: column; /* Stack items vertically */
}
flex-wrap: Controls whether flex items should wrap onto multiple lines (or columns) if they exceed the container's size.
nowrap (default): Items will stay on a single line and may overflow the container if they are too wide.
wrap: Items will wrap onto multiple lines if necessary.
wrap-reverse: Items will wrap onto multiple lines in reverse order.
Example:
.container-flex {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to the next line */
}
flex-flow: A shorthand property for flex-direction and flex-wrap.
Example:
.container-flex {
display: flex;
flex-flow: row wrap; /* Equivalent to flex-direction: row; flex-wrap: wrap; */
}
justify-content: Defines how flex items are aligned along the main axis. It distributes the remaining space when there is extra space in the container.
flex-start (default): Items are packed towards the start of the main axis.
flex-end: Items are packed towards the end of the main axis.
center: Items are centered along the main axis.
space-between: Items are evenly distributed along the main axis; the first item is at the start, the last item is at the end.
space-around: Items are evenly distributed along the main axis, with equal space around each item.
space-evenly: Items are evenly distributed along the main axis with equal space between them, at the start, and at the end.
Example:
.container-flex {
display: flex;
justify-content: center; /* Center items horizontally */
}
align-items: Defines how flex items are aligned along the cross axis.
stretch (default): Items are stretched to fill the container along the cross axis.
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 along their baselines.
Example:
.container-flex {
display: flex;
align-items: center; /* Center items vertically */
height: 200px; /* Set a height to see the vertical alignment */
}
align-content: Defines how multiple lines of flex items are aligned along the cross axis. This property only takes effect when flex-wrap is set to wrap or wrap-reverse, and there are multiple lines of flex items.
stretch (default): Lines are stretched to fill the container along the cross axis.
flex-start: Lines are packed to the start of the cross axis.
flex-end: Lines are packed to the end of the cross axis.
center: Lines are packed to the center of the cross axis.
space-between: Lines are evenly distributed along the cross axis; the first line is at the start, and the last line is at the end.
space-around: Lines are evenly distributed along the cross axis, with equal space around each line.
space-evenly: Lines are evenly distributed along the cross axis with equal space between them, at the start, and at the end.
Example:
.container-flex {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* Distribute lines evenly vertically */
height: 300px; /* Set a height to see the vertical alignment */
}
gap, row-gap, column-gap: Specifies the size of the gap between flex items. gap is a shorthand for setting both row-gap and column-gap. Note: These are relatively new properties and may not be supported by older browsers.
Example:
.container-flex {
display: flex;
gap: 10px; /* Adds 10px gap between rows and columns */
}
4. Flex Item Properties
These properties are applied to the flex items (direct children of the flex container) to control their individual behavior.
order: Specifies the order in which flex items appear within the container. By default, items are laid out in the order they appear in the HTML source. order accepts integer values; items with lower values appear earlier.
Example:
.item:nth-child(2) {
order: -1; /* Moves the second item to the beginning */
}
flex-grow: Specifies how much a flex item should grow relative to other flex items in the container. If all items have flex-grow: 1, the remaining space will be distributed equally among them. If one item has flex-grow: 2, it will take up twice as much space as the others.
Example:
.item:nth-child(1) {
flex-grow: 1; /* Grow to fill available space */
}
.item:nth-child(2) {
flex-grow: 2; /* Grow twice as much as other items */
}
flex-shrink: Specifies how much a flex item should shrink relative to other flex items in the container if there is not enough space. A value of 0 prevents the item from shrinking. The default value is 1.
Example:
.item {
flex-shrink: 1; /* Allow items to shrink if needed (default) */
width: 200px; /* Important: give a fixed width for shrink to take effect */
}
.item:nth-child(2) {
flex-shrink: 0; /* Prevent this item from shrinking */
}
flex-basis: Specifies the initial main size of the flex item before any available space is distributed. It can be a length (e.g., 100px, 20%) or auto (default). If set to auto, the item's size is based on its content. If set to 0, the item takes up no initial space, and its size is determined solely by flex-grow.
Example:
.item {
flex-basis: 200px; /* Set initial size to 200px */
}
flex: A shorthand property for flex-grow, flex-shrink, and flex-basis.
Syntax: flex: [flex-grow] [flex-shrink] [flex-basis];
Example:
.item {
flex: 1; /* Items grow equally to fill space */
}
.item:nth-child(2) {
flex: 2; /* This item grows twice as much as the others */
}
align-self: Allows you to override the align-items property for a specific flex item.
Example:
.container-flex {
display: flex;
align-items: center; /* Default alignment for all items */
height: 200px;
}
.item:nth-child(1) {
align-self: flex-start; /* Override alignment for this item */
}