CSS Flexbox is a layout module that makes it easier to create flexible and responsive layouts in CSS. It provides a simple and powerful way to align elements within a container and distribute space between them.
To use flexbox, you need to set the display
property of an element to "flex
". You can do this by adding the following rule to your CSS:
.container {
display: flex;
}
The flex container will now have two main axes: the main
axis and the cross
axis. By default, the main
axis runs horizontally and the cross
axis runs vertically. You can change this by setting the flex-direction
property:
.container {
display: flex;
flex-direction: row; /* main axis is horizontal, cross axis is vertical */
}
.container {
display: flex;
flex-direction: column; /* main axis is vertical, cross axis is horizontal */
}
You can control how the flex items are aligned along the main axis using the justify-content
property. The possible values are:
flex-start
: aligns items to the start of the main axisflex-end
: aligns items to the end of the main axiscenter
: aligns items to the center of the main axisspace-between
: distributes items evenly along the main axis, with the first and last items aligned to the start and end, respectivelyspace-around
: distributes items evenly along the main axis, with equal space around each item
.container {
display: flex;
justify-content: flex-start; /* align items to the start of the main axis */
}
It's important to note that the justify-content
property only works when there is free space in the container. If the container is smaller than the total width of the flex items, the flex items will overflow the container. In this case, you can use the overflow
property to control how the overflow is handled.
You can control how the flex items are aligned along the cross
axis using the align-items
property. The possible values are:
flex-start
: aligns items to the start of the cross axisflex-end
: aligns items to the end of the cross axiscenter
: aligns items to the center of the cross axisstretch
: stretches items to fill the entire cross axisbaseline
: aligns items along their baselines
.container {
display: flex;
align-items: flex-start; /* align items to the start of the cross axis */
}
Note the same overflow constraint described for justify-content
applies to align-items
as well. i.e, If the container is smaller than the total height of the flex items, the flex items will overflow the container.
You can also control how individual flex items are aligned along the main and cross axes using the align-self
property. This property works the same way as align-items, but it only applies to a single flex item.
.item {
align-self: flex-end; /* align this item to the end of the cross axis */
}
Finally, you can use the flex property to control the size and proportion of flex items. The flex property is a shorthand for the flex-grow
, flex-shrink
, and flex-basis
properties.
Here is a brief explanation of each of these properties:
flex-grow
: determines how much a flex item will grow relative to the other flex items when there is free space in the container. The higher the value, the more the item will grow. A value of 0 means the item will not grow at all.
.item { flex-grow: 2; /* this item will grow twice as much as other flex items */ }
flex-shrink
: determines how much a flex item will shrink relative to the other flex items when there is not enough space in the container. The higher the value, the more the item will shrink. A value of 0 means the item will not shrink at all.
.item { flex-shrink: 0.5; /* this item will shrink half as much as other flex items */ }
flex-basis
: determines the initial size of a flex item before any growing or shrinking occurs. It can be specified in pixels, percentages, or as a keyword (e.g. "auto").
.item { flex-basis: 50%; /* this item will have an initial width of 50% of the container */ }
You can use the flex
property to set the values of flex-grow
, flex-shrink
, and flex-basis
at the same time. The syntax is as follows:
.item {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
For example:
.item {
flex: 2 1 50%; /* this item will grow twice as much as other items, shrink at the same rate, and have an initial width of 50% of the container */
}
I hope this tutorial has been helpful! Let me know if you have any questions or need further clarification.