Definition: Defines the direction in which flex items should be arranged.
Sets the main axis direction - horizontal or vertical. Default Value: row Values: row | row-reverse | column | column-reverse
Definition: Aligns items along the main axis (usually horizontal).
Distributes space between and around items. Default Value: flex-start Values: flex-start | center | flex-end | space-between | space-around | space-evenly
✦ Value 1: flex-start (Default)
Items aligned at the start (left)
Box 1
Box 2
Box 3
.container {
display: flex;
justify-content: flex-start; /* Items at the start */
}
.container {
display: flex;
justify-content: flex-end; /* Items at the end */
}
✦ Value 4: space-between
Equal space between items - edges touch the container
Box 1
Box 2
Box 3
.container {
display: flex;
justify-content: space-between;
/* Equal space between items - edges touch */
}
✦ Value 5: space-around
Equal space around each item
Box 1
Box 2
Box 3
.container {
display: flex;
justify-content: space-around;
/* Equal space around each item */
}
✦ Value 6: space-evenly
Exactly equal space between all items and edges
Box 1
Box 2
Box 3
.container {
display: flex;
justify-content: space-evenly;
/* All space exactly equal */
}
📍 align-items
Definition: Aligns items along the cross axis (usually vertical).
All items in a line are aligned to the same level. Default Value: stretch Values: flex-start | center | flex-end | stretch | baseline
✦ Value 1: flex-start
Items aligned at the start (top) of cross axis
Item 1
Item 2
Item 3
.container {
display: flex;
height: 120px;
align-items: flex-start; /* Items at the start (top) */
}
Definition: Determines whether items should wrap into multiple lines or stay on one line.
When container space is limited, items wrap or shrink based on this property. Default Value: nowrap Values: nowrap | wrap | wrap-reverse
✦ Value 1: nowrap (Default)
Items stay on one line and can shrink
Item 1
Item 2
Item 3
Item 4
Item 5
.container {
display: flex;
flex-wrap: nowrap; /* Keep items on one line */
overflow-x: auto; /* Can scroll horizontally */
}
✦ Value 2: wrap
Items wrap to multiple lines (from top to bottom)
Item 1
Item 2
Item 3
Item 4
Item 5
.container {
display: flex;
flex-wrap: wrap; /* Items wrap to next line */
}
.item {
flex: 0 0 calc(33% - 10px); /* 3 items per row */
}
✦ Value 3: wrap-reverse
Items wrap to multiple lines in reverse (from bottom to top)
Item 1
Item 2
Item 3
Item 4
Item 5
.container {
display: flex;
flex-wrap: wrap-reverse; /* Items wrap in reverse order */
}
📍 gap
Definition: Adds consistent spacing between flex items.
An alternative to margin and padding that provides clean spacing. Sub-properties: row-gap (space between rows), column-gap (space between columns) Values: Pixels (10px), Em (1em), Percentage (5%), etc.
Can use relative units like em, rem, or percentage
Item 1
Item 2
Item 3
.container {
display: flex;
gap: 1em; /* 1em = one unit of current font size */
}
📍 align-content
Definition: When items wrap to multiple lines, aligns those LINES vertically. Important: Only works when flex-wrap: wrap is set. Default Value: stretch Values: flex-start | center | flex-end | space-between | space-around | space-evenly | stretch
✦ Value 1: flex-start
Wrapped lines aligned at the start (top) of container
1
2
3
4
5
.container {
display: flex;
flex-wrap: wrap;
height: 200px;
align-content: flex-start; /* Lines at the top */
}