In CSS, the display: flex property is used to create a flex container, and it enables a flex context for its direct children
display: flex;
The display: flex; property is applied to a container element to enable the Flexbox layout. It establishes a flex container and turns its direct children into flex items.
.container {
display: flex;
}
}
Properties of “flex”:
flex: [flex-grow] [flex-shrink] [flex-basis];
flex-grow
Defines the ability for a flex item to grow.
.item {
flex-grow: 2;
}
flex-shrink: Defines the ability for a flex item to shrink.
.item {
flex-shrink: 1;
}
flex-basis: Defines the default size of a flex item before the remaining space is distributed.
.item {
flex-basis: 200px;
}
Example Combining display: flex and flex Property:
.container {
display: flex;
}
.item {
flex: 1 1 200px;
}
}
.item {
flex: 1 1 200px;
}