What is CSS Flexbox?
Flexbox is short for the Flexible Box Layout module.
Flexbox is a layout method for arranging items in rows or columns.
Flexbox makes it easier to design a flexible responsive layout structure, without using float or positioning.
why use css flexbox
Flexbox arranges items in rows or columns.
It adapts layouts to fit different screen sizes, making designs responsive.
Simplifies aligning items both horizontally and vertically.
Reduces the need for complex code compared to older methods.
Allows easy reordering of items within a layout
Architecture of Flexbox
There are two aspects of a Flexbox: Flex container and Flex item
The flex items can be laid out either along the main axis (starting from the main start and ending at the main end) or along the cross axis (starting from the cross start and ending at the cross end).
Main axis: Flex items are laid out along this axis, either horizontally or vertically based upon the flex-direction.
Cross axis: It is perpendicular to the main axis and its direction depends on the direction of the main axis.
Main size: It is the width/height of the flex item depending on the main dimension.
Cross size: It is the width/height of the flex item depending on the cross dimension.
To understand the different Flexbox properties, let us take an example by creating an HTML file, along with a CSS file.
This is our CSS code in which we will be styling the flex-container and flex-item.
From the above output, the items are aligned vertically, by default, and the default display is block-level. The pink area is the container and the blue boxes within it are the items.
Properties for the Parent/Flex Container:
- display: Let’s make the container flex by setting its display to flex inside the .container of our CSS file.
Output: As you can see, after applying the display: flex property, the items have been aligned horizontally as the default flex-direction of flexbox is row.
now we can see justify contain and align items properties
justify contain :
It seems like you might be referring to the CSS property justify-content. This property is used in Flexbox to align the flex items along the main axis of the container. Here are the common values for justify-content:
flex-start: Aligns items to the start of the container.
.container {
display: flex;
justify-content: flex-start;
}
flex-end: Aligns items to the end of the container.
.container {
display: flex;
justify-content: flex-end;
}
center: Centers items in the container.
.container {
display: flex;
justify-content: center;
}
space-between: Distributes items evenly with the first item at the start and the last item at the end.
.container {
display: flex;
justify-content: space-between;
}
- space-around: Distributes items with equal space around them.
.container {
display: flex;
justify-content: space-around;
}
space-evenly: Distributes items with equal space between them and around them.
.container {
display: flex;
justify-content: space-evenly;
}
In CSS, the align-items property is used in Flexbox to align flex items along the cross axis of the container. Here are the common values for align-items:
flex-start: Aligns items to the start of the cross axis.
.container {
display: flex;
align-items: flex-start;
}
flex-end: Aligns items to the end of the cross axis.
.container {
display: flex;
align-items: flex-end;
}
center: Centers items along the cross axis.
.container {
display: flex;
align-items: center;
}
baseline: Aligns items such that their baselines align.
.container {
display: flex;
align-items: baseline;
}
stretch: Stretches items to fill the container (default value).
.container {
display: flex;
align-items: stretch;
}
