CSS Flexible Box Layout, commonly known as Flexbox, is a one-dimensional layout model that provides an efficient way to design complex web layouts and distribute space among items in a container. Flexbox is particularly useful for building responsive and dynamic user interfaces.
Key Concepts:
- Flex Container: The parent element with display: flex; or display: inline-flex; becomes a flex container. Example:
.flex-container {
display: flex;
}
Flex Items: The child elements inside a flex container are the flex items. By default, flex items are laid out in a row. Example:
.flex-item {
flex: 1; /* Flex shorthand for flex-grow, flex-shrink, and flex-basis */
}
Main Axis and Cross Axis: Flexbox works along two axes: the main axis and the cross axis. The main axis is defined by the flex-direction property (row, row-reverse, column, column-reverse). The cross axis is perpendicular to the main axis.
Justify Content: justify-content aligns flex items along the main axis. Example:
.flex-container {
display: flex;
justify-content: space-between;
}
Align Items: align-items aligns flex items along the cross axis. Example:
.flex-container {
display: flex;
align-items: center;
}
Flex Direction: flex-direction sets the direction of the main axis. Example:
.flex-container {
display: flex;
flex-direction: column;
}
Example: Consider a simple navigation bar using Flexbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.nav-bar {
display: flex;
justify-content: space-around;
background-color: #eee;
padding: 10px;
}
.nav-item {
flex: 1;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<div class="nav-bar">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Contact</div>
</div>
</body>
</html>
In this example: The parent container (nav-bar) is a flex container. The child items (nav-item) are flex items. justify-content: space-around; evenly spaces the items along the main axis.
What’s the difference between a flex container and a flex item?
Difference between a Flex Container and a Flex Item:
Flex Container: The flex container is the parent element that is set to have display: flex; or display: inline-flex;. It establishes the flex formatting context and contains the flex items. Properties like justify-content, align-items, and flex-direction are applied to the flex container.
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
Flex Item: Flex items are the child elements of the flex container. They are the elements directly affected by the flex properties, such as flex-grow, flex-shrink, and flex-basis. Flex items can also be flex containers themselves, creating nested flex structures.
.flex-item {
flex: 1;
}
How do you create a flex item?
To create a flex item, designate an element as a child of a flex container and apply the display: flex; property to the container. The child element automatically becomes a flex item.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
In this example, the <div>
elements inside the flex-container become flex items automatically, and the properties applied to .flex-item affect the layout within the flex container.