Flex is a powerful layout model in CSS that allows us to design complex layouts with ease.
Defines a flex container. It enables a flex context for all its direct children.
.card {
display: flex;
}
Specifies the direction in which the flex items are placed in the flex container.
.card {
flex-direction: row;
}
row: Items are placed along the main axis (default).
row-reverse: Items are placed along the main axis in reverse order.
column: Items are placed along the cross-axis.
column-reverse: Items are placed along the cross-axis in reverse order.
.card {
flex-wrap: wrap;
}
Specifies whether flex items should wrap or not if they exceed the flex container's width.
nowrap: Items are not wrapped (default).
wrap: Items wrap onto multiple lines if needed.
wrap-reverse: Items wrap onto multiple lines in reverse order.
.card {
justify-content: center;
}
Aligns flex items along the main axis of the flex container.
.card {
align-items: center;
}
flex-start: Items are packed toward the start of the main axis.
flex-end: Items are packed toward the end of the main axis.
center: Items are centered along the main axis.
space-between: Items are evenly distributed along the main axis, with space between them.
space-around: Items are evenly distributed along the main axis, with space around them.
Aligns flex items along the cross-axis of the flex container.
flex-start: Items are aligned at the start of the cross-axis.
flex-end: Items are aligned at the end of the cross-axis.
center: Items are centered along the cross-axis.
baseline: Items are aligned such that their baselines align.
stretch: Items are stretched to fill the container.
Flexbox provides a powerful and flexible way to create layouts in CSS, allowing us to build responsive designs with ease.
By using flex container and flex item properties, we can control the layout, alignment, and distribution of elements within a flex container.