css - Flexbox
Web page design has always been a difficulty for developers. Traditional methods such as floats, inline blocks, and table-based layouts frequently resulted in complex, untidy, and difficult-to-maintain code. CSS Flexbox is a new layout technology that enables more intuitive, efficient, and flexible designs, ideal for creating adaptable web pages.
In this blog post, we'll look into CSS Flexbox, its fundamental concepts, and how you can use it to construct powerful layouts with ease.
1. What is CSS Flexbox?
CSS Flexbox, or Flexible Box Layout Module, is a one-dimensional layout model that lets you modify the alignment, spacing, and size of elements inside a container. It streamlines the process of creating complex layouts by automatically dividing space and resizing things to fit the screen size, making it very effective for responsive design.
Flexbox is meant to arrange things in a row or a column, making it perfect for horizontal and vertical alignment, which can be difficult to achieve with older CSS approaches.
2. Flexbox Terminology
Before we get into the examples, it's crucial to understand some fundamental Flexbox terms:
Flex Container: The parent element that contains the flex elements. To make an element a flex container, add display: flex to it.
Flex Items are the immediate children of the flex container. These are the elements you want to arrange with Flexbox.
Main Axis: The major axis on which flex elements are placed. It may be horizontal (row) or vertical (column).
The cross-axis is perpendicular to the main axis.
Here’s the basic syntax to create a Flexbox layout:
.container {
display: flex; /* Defines a flex container */
}
This one line turns a regular block container into a Flexbox container!
3. Key Flexbox Properties
Let’s break down some of the key properties Flexbox offers and how they work.
a. flex-direction
This property defines the direction in which the flex items are placed in the flex container.
row (default): Items are arranged horizontally.
column: Items are arranged vertically.
.container {
display: flex;
flex-direction: row; /* or column */
}
b. justify-content
This property aligns flex items along the main axis (horizontal or vertical).
flex-start: Aligns items to the start of the container.
center: Centers items.
flex-end: Aligns items to the end.
space-between: Distributes items with space between them.
space-around: Distributes items with space before, between, and after.
.container {
display: flex;
justify-content: center;
}
c. align-items
This property aligns items along the cross-axis (perpendicular to the main axis).
flex-start: Aligns items at the start of the cross-axis.
center: Centers items along the cross axis.
flex-end: Aligns items at the end of the cross-axis.
stretch: Stretches items to fill the container (default behaviour).
.container {
display: flex;
align-items: center;
}
d. flex-wrap
By default, Flexbox tries to fit all items into one line. The flex-wrap property allows items to wrap to the next line if necessary.
nowrap (default): All items are placed in a single line.
wrap: Items will wrap onto multiple lines when they don’t fit.
.container {
display: flex;
flex-wrap: wrap;
}
