The flexbox layout module is a powerful and flexible tool for building responsive and complex layouts in CSS. It enables easy alignment, distribution, and positioning of elements within a container. At the core of flexbox are two concepts: the flex container and the flex items.
A flex container is an element that holds all the flex items and establishes a flex context for its children. To turn an element into a flex container, you apply the display: flex or display: inline-flex property to it. This causes its child elements (the flex items) to be laid out according to the flexbox model.
Example of creating a flex container:
<style>
.container {
display: flex;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
In this example, the container is the flex container, and its child div elements become the flex items.
The flex-direction property determines the direction in which the flex items are laid out within the flex container. The possible values are:
Example of changing the flex direction:
<style>
.container {
display: flex;
flex-direction: column;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
In this example, the flex items are arranged vertically because of flex-direction: column.
Flex items are the direct children of a flex container. These items can be adjusted in terms of their size, position, and alignment within the flex container. Flex items can be modified using various properties such as flex-grow, flex-shrink, and flex-basis.
The flex-grow property determines how much a flex item will grow relative to the other flex items in the container when there is extra space available. The default value is 0, meaning items will not grow unless specified.
Example:
<style>
.container {
display: flex;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
</style>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div>Item 3</div>
</div>
In this example, item1 will grow to take up the available space, but item2 will grow twice as much as item1 due to flex-grow: 2.
The flex-shrink property determines how much a flex item will shrink when there is not enough space in the flex container. The default value is 1, meaning the items will shrink if necessary to fit in the container.
Example:
<style>
.container {
display: flex;
width: 300px;
}
.item {
flex-shrink: 1;
width: 200px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
In this example, if the container is smaller than the combined width of the flex items, both items will shrink to fit.
The flex-basis property defines the initial size of a flex item before any space distribution happens. It can be set to a specific value like 100px or auto to let the content dictate the item's size.
Example:
<style>
.container {
display: flex;
}
.item {
flex-basis: 150px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
In this example, each flex item will have a base size of 150px before the available space is distributed.
The align-items property is used to align flex items along the cross axis (perpendicular to the main axis). It has several values:
Example:
<style>
.container {
display: flex;
align-items: center;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
In this example, all flex items will be aligned to the center of the container.
The flex container and its items provide a powerful and flexible way to build layouts in CSS. By controlling the layout with properties like flex-direction, flex-grow, flex-shrink, and flex-basis, you can create complex and responsive designs with minimal effort. Understanding the relationship between the flex container and its items is key to mastering the flexbox layout model.