CSS Flexbox is a powerful layout module that simplifies the process of creating flexible and responsive web designs. By using display: flex, designers can control the arrangement and alignment of elements within a container more efficiently than with traditional layout methods.
Flex Container: The parent element with ‘ display: flex;’ applied. It establishes a flex context for its direct children, which become flex items.
Flex Items: The direct children of the flex container that are laid out according to flexbox properties
.container {
display: flex;
}
Determines the direction of the main axis and the layout of flex items.
• row: Horizontal axis (default).
• column: Vertical axis.
• row-reverse: Horizontal axis, reversed order.
• column-reverse: Vertical axis, reversed order.
.container {
display: flex;
flex-direction: row; /* or column, row-reverse, column-reverse */
}
Controls whether flex items should wrap onto multiple lines if needed.
• nowrap: All items on one line (default).
• wrap: Items wrap onto multiple lines.
• wrap-reverse: Items wrap onto multiple lines in reverse order.
.container {
display: flex;
flex-wrap: wrap; /* or nowrap, wrap-reverse */
}
Aligns flex items along the main axis (horizontal if flex-direction is row).
• flex-start: Align items at the start (default).
• flex-end: Align items at the end.
• center: Align items at the center.
• space-between: Distribute items with space between them.
• space-around: Distribute items with space around them.
• space-evenly: Distribute items with equal space between and around them.
.container {
display: flex;
justify-content: center; /* or flex-start, flex-end, space-between, space-around, space-evenly */
}
Aligns flex items along the cross-axis (vertical if flex-direction is row).
• stretch: Stretch items to fill the container (default).
• flex-start: Align items at the start.
• flex-end: Align items at the end.
• center: Align items at the center.
• baseline: Align items along their baselines.
.container {
display: flex;
align-items: center; /* or flex-start, flex-end, stretch, baseline */
}
Specifies the order in which flex items appear within the flex container. The default value is 0, and it can be positive or negative.
.item {
order: 1; /* or any positive/negative integer */
}
• A shorthand for flex-grow, flex-shrink, and flex-basis.
• Defines how flex items should grow, shrink, and their base size.
.item {
flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
}
Overrides align-items for a specific flex item, allowing individual alignment along the cross-axis.
.item {
align-self: flex-end; /* or auto, flex-start, center, baseline, stretch */
}
Aligns flex lines within the flex container if there are multiple lines. This property affects the entire lines rather than individual items.
• flex-start: Align lines at the start.
• flex-end: Align lines at the end.
• center: Align lines at the center.
• space-between: Distribute lines with space between them.
• space-around: Distribute lines with space around them.
• stretch: Stretch lines to fill the container (default).
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* or flex-start, flex-end, center, space-around, stretch */
}
display: flex: The specific CSS property that activates the Flexbox layout model for a container element.
Flexbox: Refers to the entire layout module and set of properties used to create flexible layouts.
In summary, Flexbox is the layout model for arranging items in a container, while display: flex is the property used to enable this layout model on a container element.
CSS Grid: Ideal for two-dimensional layouts with rows and columns. It provides fine control over grid-based designs.
Flexbox: Best for one-dimensional layouts, either horizontal or vertical. It excels at aligning and distributing items along a single axis.
Use CSS Grid for complex, grid-based layouts with multiple dimensions and overlapping content.
Use Flexbox for simpler, linear layouts where alignment and distribution of items along a single axis are needed.
Both Flexbox and CSS Grid are supported by modern browsers and can be used together to create powerful and flexible web layouts.