A Flex Container is the parent element that enables Flexbox layout. When you apply display flex to an element, all its direct children become flex items and follow flexible layout rules.
To create a flex container, you use the display property with the value flex.
Example
.container {
display: flex;
}
Once this is applied, the layout of child elements becomes more dynamic and responsive.
Flex Direction controls the direction in which items are placed inside the container. The default is row, which arranges items horizontally. You can also use column to arrange items vertically.
Example
.container {
display: flex;
flex-direction: column;
}
Justify Content is used to align items horizontally along the main axis. It helps control spacing between items.
Common values include flex-start, center, space-between, and space-around.
Example
.container {
display: flex;
justify-content: center;
}
Align Items is used to align items vertically along the cross axis.
Example
.container {
display: flex;
align-items: center;
}
Flex Wrap allows items to move to the next line if there is not enough space in one row.
Example
.container {
display: flex;
flex-wrap: wrap;
}
Align Content is used when there are multiple lines of flex items. It controls spacing between those lines.
Example
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
Gap is used to create space between flex items without using margin.
Example
.container {
display: flex;
gap: 10px;
}
A flex container makes it easier to build responsive layouts without using complex positioning. It is widely used in modern web design for creating flexible and adaptive user interfaces.