What is CSS flax Box?
Flexbox gives the container the ability to expand and Shrink elements based on the available space in your browser screen. Flexbox Layout replaces float Layout Design with one-Dimensional layouts.
Flexbox prefix when writing CSS code.
display:flex;
let start it
flexbox properties:
Flex-direction
flex-wrap
flex-flow
flex-grow
flex-shrink
flex-basis
flex
justify-content
align-content
align-item
order
1. flex-direction:
Flex-direction provides direction row or column-wise in your website.
Properties: value
row (Default): use Horizontal to direction item to Left to Right
row-reverse: use row reverse to change direction from Right to left
Column (vertical): use Vertical to direction content item top to bottom
column-reverse: column-reverse reverse the direction Bottom to top
Note: Do Not work with the inner items.
.flex-container {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}2. flex-wrap:
Sometimes your content overflow. in that time, we use flex-wrap
Properties: value
nowrap: nowrap is the default property.
warp: try to align the item in the given weight and height.
warp-reverse: warp-reverse reverse the order of the item.
.flex-container {
display: flex;
flex-wrap: wrap;
}3. flex-flow:
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;
}4. flex-grow:
Flex-grow work on the child item, not a parent item. Flex-grow gives equal space and width.
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>5. flex-shrink:
Flex-shrink uses 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>6. flex-basis:
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>7. flex:
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
.item {
display: flex;
flex: 1 1 150px;
}8. justify-content:
Justify-content properties use for Horizontal Alignment.
Property value:
flex-start: all the items more to Lift side
flex-end: flex-end all the items more on the Right side.
center-all the item in the center
space-around: space-around first and end item move to Coner
space-between: divide equal space in item
space-evenly: space-evenly use for distributing space equally for every item.
.flex-container {
display: flex;
justify-content: center;
/* Write all value */
}9. align-content:
Align-content to use align item to vertical. Some time align-content use with height and width, and you also use it on data is overflow.
Properties: value
Stretch: stretch is a default value
flex-start: all the items more to Lift side
flex-end: flex-end all the items more on the Right side.
center: all the items in the center
space-around: space-around first and end item move to Coner
space-between:
space-evenly: space-evenly use for distributing space equally for every item.
.flex-container {
display: flex;
align-content: space-between;
}10. align-items:
Align-self use to the individual item. Align-self align item to vertical item.
Properties: value
Stretch: stretch is a default value
flex-start: all the items more to the Lift side
flex- end: flex-end all the items more on the Right side.
center: all the items in the center
baseline: baseline work with your font
auto: work according to parent
.flex-container {
display: flex;
height: 200px;
align-items: center;
}11. order:
When using the order property in the flex-box. use to order change the item order according to your requirement
Syntax:
order: number;
Order aspect the number value only.
<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>Note: use margin property to enhance your work
