CSS Flexbox (Flexible Box Layout)
CSS Flexbox, or Flexible Box Layout, is a model that helps you design responsive and flexible web layouts. It makes aligning items, distributing space, and handling different screen sizes easier without using complex float or positioning techniques.
Key Concepts of Flexbox
1. Flex Container
The flex container is the element that holds the items you want to arrange using Flexbox. You turn an element into a flex container by setting its display property to flex or inline-flex.
2. Flex Items
The elements inside a flex container are called flex items. These items will automatically align based on the flexbox properties you set.
Example:
Output:
In this example:
• The .flex-container element is a flex container, and its direct children (.flex-item) are flex items.
• Flexbox is a layout mode that allows for responsive design, enabling items to be flexible and distribute space efficiently within a container.
3. Main Axis and Cross Axis
• Main Axis: The primary direction in which flex items are arranged (usually horizontal).
• Cross Axis: The direction perpendicular to the main axis (usually vertical).
4. Flex Properties
Here are some essential properties you can use with Flexbox:
I. justify-content
This property aligns flex items along the main axis.
Values:
• flex-start: Aligns items to the start of the container.
• flex-end: Aligns items to the end of the container.
• center: Centers items in the container.
• space-between: Distributes space between items.
• space-around: Distributes space-around items.
Example:
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: #f2f2f2;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
padding: 20px;
margin: 10px;
color: white;
}
</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>
Output:
In this example:
The justify-content: center; property in the .flex-container ensures that all flex items are centered horizontally within the container. This is useful for layouts where you want items to be centrally aligned, regardless of the container’s width.
II. align-items
This property aligns flex items along the cross axis.
Values:
• stretch: Stretches items to fill the container (default).
• flex-start: Aligns items to the start of the cross axis.
• flex-end: Aligns items to the end of the cross axis.
• center: Centers items along the cross axis.
• baseline: Aligns items based on their baseline.
Example:
<head>
<style>
.flex-container {
display: flex;
align-items: center;
height: 200px;
background-color: #f2f2f2;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
padding: 20px;
margin: 10px;
color: white;
}
</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>
Output:
In this example:
The align-items: center; property in the .flex-container ensures that all flex items are vertically centered within the container. This is useful for layouts where you want items to be centered regardless of the container’s height.
III. flex-direction
This property defines the direction in which flex items are placed in the container.
Values:
• row: Default, items are placed from left to right.
• row-reverse: Items are placed from right to left.
• column: Items are placed from top to bottom.
• column-reverse: Items are placed from bottom to top.
Example:
<head>
<style>
.flex-container {
display: flex;
flex-direction: column-reverse;
background-color: #f2f2f2;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
padding: 20px;
margin: 10px;
color: white;
}
</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>
Output:
In this example:
The flex-direction: column-reverse; property in the .flex-container reverses the vertical stacking order of the flex items. Instead of the default top-to-bottom order, the items are arranged from bottom to top.
IV. flex-wrap
This property controls whether flex items should wrap to the next line if they overflow the container.
Values:
• nowrap: No wrapping, items stay on a single line (default).
• wrap: Items wrap to the next line if needed.
• wrap-reverse: Items wrap to the next line in reverse order.
Example:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
background-color: #f2f2f2;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
padding: 20px;
margin: 10px;
color: white;
}
</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 class=”flex-item”>Item 4</div>
<div class=”flex-item”>Item 5</div>
</div>
</body>
Output:
Mobile View
In this example:
• The flex-wrap: wrap-reverse; property causes the flex items to wrap onto new lines if the container is too narrow to fit them all in a single line. However, unlike the normal wrap behavior, the wrap happens in reverse, meaning the new line of items appears above the previous one.
• The layout remains flexible, adjusting to the container’s width and reversing the order of wrapped items as needed.
Conclusion
CSS Flexbox is a powerful tool for creating responsive and flexible layouts. It simplifies the process of aligning and distributing space among items in a container, making it easier to design web pages that look good on any screen size. By mastering Flexbox, you can create layouts that are both functional and visually appealing.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Simple Horizontal Centering
Objective: Center a single item horizontally within a container using Flexbox.
Expected Output: A box centered horizontally in the middle of its container.
Output:
Scenario 2: Aligning Items Vertically and Horizontally
Objective: Center multiple items both vertically and horizontally within a container.
Expected Output: Three boxes aligned in the center of the container.
Output:
Scenario 3: Creating a Responsive Navigation Bar
Objective: Create a responsive navigation bar where the items are evenly spaced.
Expected Output: A navigation bar with three links evenly spaced across the width of the container.
Output:
Scenario 4: Flexbox with Wrapping
Objective: Create a flex container where items wrap to the next line if there is not enough space.
Expected Output: Multiple items that wrap to the next line when the container is resized.
Output:
Mobile View
Scenario 5: Flexbox Column Layout
Objective: Arrange items in a vertical column using Flexbox.
Expected Output: Items aligned in a vertical column, centered horizontally.
Output:
Scenario 6: Align Items at the Bottom
Objective: Align items at the bottom of a flex container.
Expected Output: Items aligned at the bottom of the container.
Output:
