Flexbox is to give the container the ability to expand and Shrink elements base on the available space. Flexbox Layout replaces float Layout Design New way to build one-Dimensional layouts.Flexbox prefix when writing CSS code.
display:flex;
flexbox properties:
Is use flex-direction on the website on flex-direction provides direction row or column-wise.
Properties value:
Note: Do Not work with inner item
.flex-container {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}
some over content overflow in that condition use flex-wrap
flex-warp property value:
.flex-container {
display: flex;
flex-wrap: wrap;
}
The flex-flow shorthand of the flex-direction and flex-wrap.when using in CSS file:first, use flex-direction after use flex-wrap.Syntax:
flex-flow: flex-direction flex-wrap;
.flex-container {
display: flex;
flex-flow: row wrap;
}
Flex-grow work on the child item, not a parent item. Flex-grow gives equal space and also works on weight.
syntax:
flex-grow:1;
The flex-grow gives value base on a number like 1,2,3….n.
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-grow: 2">3</div>
<div>2</div>
</div>
flex-shrink use to create a responsive web layout.
flex-shrink:0;
No work. But when increase value to zero. Then web layout shrink.
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
</div>
The flex-basic work like max-width.but in max-width fix width size.the flex-basic work with width and space. Note: flex-basis use to the individual item.
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-basis: 200px”>3</div>
<div>4</div>
</div>
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
.item {
display: flex;
flex: 1 1 150px;
}
Justify-content properties use for Horizontal Alignment
property value:
.flex-container {
display: flex;
justify-content: center;
/* Write all value */
}
align-content to use align item to vertical. Some time use height and width on the item in that condition data is overflow.
.flex-container {
display: flex;
align-content: space-between;
}
Align-self use to the individual item. Align-self align item to vertical item.
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
When using the order property in the flex-box. Use to order change the item order according to your requirement.
order: number;
<div class=”flex-container”>
<div>1</div>
<div style=”order: 5">2</div>
<div>3</div>
<div>4</div>
<div style=”order: 2">5</div>
</div>