WikiGalaxy
CSS FlexBox: Introduction
What is FlexBox?
FlexBox is a CSS layout module that makes it easier to design flexible and efficient layouts. It allows you to align, distribute, and order items within a container, even when their sizes are unknown or dynamic.
Why Use FlexBox?
FlexBox provides a more efficient way to lay out, align, and distribute space among items in a container. It is particularly useful for creating responsive designs that adapt to different screen sizes.
Flex Container
The parent element of a FlexBox layout is known as the flex container. It defines the context in which the flex items (children) are laid out.
Flex Items
Flex items are the children of a flex container. They can be laid out in any direction and can flex (grow or shrink) to fill available space.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
Flex Properties
FlexBox properties include flex-direction, justify-content, align-items, and flex-wrap, among others.
Example Explained
In the example, display: flex; makes the container a flex container. justify-content: space-between; distributes space evenly between items, and align-items: center; aligns items vertically.
Console Output:
Flex items are aligned and distributed within the container.
Flex Direction
Flex Direction Property
The flex-direction property defines the direction in which the flex items are placed in the flex container. Possible values include row, row-reverse, column, and column-reverse.
Row vs Column
By default, flex items are laid out in a row. Setting flex-direction: column; will stack the items vertically.
Reverse Values
The row-reverse and column-reverse values reverse the order of the flex items.
.container {
display: flex;
flex-direction: column;
}
Example Explained
In this example, flex-direction: column; stacks the flex items vertically within the container.
Console Output:
Flex items are stacked vertically.
Justify Content
Justify Content Property
The justify-content property aligns the flex items along the main axis. Possible values include flex-start, flex-end, center, space-between, and space-around.
Use Cases
This property is particularly useful for distributing space between items or aligning them to the start, end, or center of the container.
.container {
display: flex;
justify-content: space-around;
}
Example Explained
In this example, justify-content: space-around; distributes space around the flex items, providing equal space before and after each item.
Console Output:
Flex items have equal space around them.
Align Items
Align Items Property
The align-items property aligns flex items along the cross axis. Possible values include flex-start, flex-end, center, baseline, and stretch.
Use Cases
This property is useful for aligning items vertically within the container, especially when they have different heights.
.container {
display: flex;
align-items: stretch;
}
Example Explained
In this example, align-items: stretch; makes all flex items stretch to fill the container's cross-axis.
Console Output:
Flex items stretch to fill the container's height.
Align Self
Align Self Property
The align-self property allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
Use Cases
This property is useful for adjusting the alignment of specific items within a flex container without affecting others.
.item {
align-self: flex-end;
}
Example Explained
In this example, align-self: flex-end; aligns the specific flex item to the end of the container's cross-axis.
Console Output:
Specific flex item aligned to the end.
Flex Wrap
Flex Wrap Property
The flex-wrap property specifies whether flex items should wrap onto multiple lines. Possible values include nowrap, wrap, and wrap-reverse.
Use Cases
This property is useful for controlling how items flow in the container, especially in responsive designs where space is limited.
.container {
display: flex;
flex-wrap: wrap;
}
Example Explained
In this example, flex-wrap: wrap; allows the flex items to wrap onto multiple lines if necessary.
Console Output:
Flex items wrap onto multiple lines.
Order
Order Property
The order property defines the order in which flex items appear within the container. By default, items have an order value of 0, but this can be changed to reposition items.
Use Cases
This property is useful for reordering items without changing the HTML structure.
.item {
order: 2;
}
Example Explained
In this example, order: 2; moves the flex item to a different position within the container based on the order value.
Console Output:
Flex item positioned according to order value.
Flex Grow, Shrink, and Basis
Flex Grow
The flex-grow property defines the ability for a flex item to grow relative to the rest of the items in the flex container.
Flex Shrink
The flex-shrink property defines the ability for a flex item to shrink relative to the rest of the items in the flex container.
Flex Basis
The flex-basis property defines the default size of an element before the remaining space is distributed.
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
Example Explained
In this example, flex-grow: 1; and flex-shrink: 1; allow the flex item to grow and shrink as needed, while flex-basis: 100px; sets its initial size.
Console Output:
Flex item adjusts size based on available space.
