What is CSS flax Box?

display:flex;

let start it

1. flex-direction:

.flex-container {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}

2. flex-wrap:

.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.

.flex-container {
display: flex;
flex-flow: row wrap;
}

4. flex-grow:

<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:

.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.

.flex-container {
display: flex;
align-content: space-between;
}

10. align-items:

.flex-container {
display: flex;
height: 200px;
align-items: center;
}

11. order:

<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>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

527 Followers

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/