Home 〉 CSS Tutorials 〉 CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples

CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples !

CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples !

Please Note :
  • This Tutorial is still not Completed.
  • We will be Completing it soon.

Having trouble aligning items in a row or column? CSS Flexbox makes it easy to create flexible, responsive layouts using the `display: flex` property. You’ll learn how to align items horizontally or vertically, distribute space evenly, and wrap content as needed. Flexbox is great for navbars, cards, and toolbars.

Introduction

We've already covered the basics of 'display' in our post “CSS Display Property Explained with Examples | Block, Inline, Flex, Grid.” In this post, we will dive deep into one of the most powerful layout tools in CSS: 'display: flex'.

Flexbox is used to build responsive and dynamic web layouts. It allows items within a container to adjust and align themselves based on the container's size and the properties applied.

What is CSS Flexbox?

CSS Flexbox (Flexible Box) layout is designed to distribute space and align items within a container, even when their size is unknown or dynamic.

To use it:

Example 📄

.container {
display: flex;
}

This makes all child elements of '.container' become 'flex items'.

Flex Container Properties

These properties are applied to the parent (flex container)

'display: flex'

Defines an element as a flex container.

Example 📄

.container {
display: flex;
}

Values:

  • 'flex' - Block-level flex container.
  • 'inline-flex' - Inline-level flex container.

'flex-direction'

Controls the direction of items in the flex container.

Example 📄

.container {
display: flex;
flex-direction: row;
}

Values:

  • 'row' (default)- left to right
  • 'row-reverse' - right to left
  • 'column' - top to bottom
  • 'column-reverse' - bottom to top

'flex-wrap'

Defines if items should wrap onto multiple lines.

Example 📄

.container {
flex-wrap: wrap;
}

Values:

  • 'nowrap' (default)
  • 'wrap'
  • 'wrap-reverse'

'flex-flow'

Shorthand for `flex-direction` and `flex-wrap`.

Example 📄

.container {
flex-flow: flex-direction flex-wrap;
}

Values: 'row wrap', 'row nowrap', 'column wrap', 'column nowrap', etc

'justify-content'

Aligns items horizontally.

Example 📄

.container {
justify-content: space-between;
}

Values:

  • 'flex-start' : (default) Start of the line.
  • 'flex-end': End of the line.
  • 'center' : Center of the line.
  • 'space-between' : Equal space between items.
  • 'space-around' : Equal space around items.
  • 'space-evenly' : Equal space between and around items.

'align-items'

Aligns items vertically (cross axis).

Example 📄

.container {
align-items: center;
}

Values:

  • 'stretch' (default) : Fill container.
  • 'flex-start' : Start of cross axis.
  • 'flex-end' : End of cross axis.
  • 'center' : Center of cross axis.
  • 'baseline' : Align based on text baseline.

'align-content'

Aligns rows when there's extra space in the container.

Example 📄

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

Note: Only works when items wrap ('flex-wrap: wrap').

Values:

  • ''stretch' (default)
  • 'flex-start'
  • 'flex-end'
  • 'center'
  • 'space-between'
  • 'space-around'
  • 'space-evenly'

'gap', 'row-gap', and 'column-gap'

Defines spacing between flex items.

Example 📄

.container {
row-gap: 10px;
column-gap: 10px;
gap: 10px;
}

Values:'length' (e.g., '10px'),'percentage', 'gap: 10px 20px' → row gap 10px, column gap 20px.

Flex Item Properties

These are applied to the children (flex items) inside the container.

'order'

Controls the order of flex items.

Example 📄

.item {
order: 2;
}

Default value is '0'. Lower numbers appear first.

Values:

  • Integer (e.g., '0', '1', '-1')
  • Default: '0'
  • Lower values appear first, etc.

'flex-grow'

Defines how much a flex item should grow relative to others.

Example 📄

.item {
flex-grow: 1;
}

Values:

  • Integer (e.g., '0', '1', '2', ...)
  • Default: '0' (do not grow)

'flex-shrink'

Specifies how an item should shrink when space is tight.

Example 📄

.item {
flex-shrink: 1;
}

Values:

  • Integer (e.g., '1', '0', '2')
  • Default: '1' (items can shrink)
  • '0' (do not shrink)

'flex-basis'

Defines the default size of an element before the remaining space is distributed.

Example 📄

.item {
flex-basis: 200px;
}

Values:

  • 'auto' *(default)
  • 'length' (e.g., '100px')
  • 'percentage'

'flex' (Shorthand)

Shorthand for 'flex-grow', 'flex-shrink', and 'flex-basis'.

Example 📄

.item {
flex: 1 1 100px;
}

Examples:

  • 'none' → '0 0 auto'
  • '1' → '1 1 0%'
  • 'flex: 2 2 100px'
  • 'auto', 'initial', 'inherit'

'align-self'

Overrides 'align-items' for a specific item.

Example 📄

.item {
align-self: flex-end;
}

Values : 'auto' (default), 'flex-start', 'flex-end', 'center', 'baseline', and 'stretch'

Examples of 'flex-direction' 'flex-wrap', and 'flex-flow' Property

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

.cont1 {
display: flex;
width: 100%;
border: 5px outset gray;
background-color: whitesmoke;
}
.cont1a {
width: 70px;
padding: 5px 100px;
height: 40px;
background-color: rgba(255, 249, 128, 0.789);
border: 1px solid gray;
}

</style>
</head>
<body>

<ul class="aul">
<li>This 'flex-box' has following CSS styling</li>
<li>.cont1 { display: flex; width: 100%; border: 5px outset gray; background-color: whitesmoke; }</li>
<li>.cont1a { width: 70px; padding: 5px 100px; height: 40px; background-color: rgba(255, 249, 128, 0.789); border: 1px solid gray; } </li>
</ul>
<div class="cont1">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anor anoi">flex-direction: row (default value) </h3>
<div class="cont1" style="flex-direction: row; flex-wrap: wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-direction: row-reverse</h3>
<div class="cont1" style="flex-direction: row-reverse; flex-wrap: wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-direction: column </h3>
<div class="cont1" style="flex-direction: column; flex-wrap: wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-direction: column-reverse</h3>
<div class="cont1" style="flex-direction: column-reverse; flex-wrap: wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-wrap: nowrap (default value) </h3>
<div class="cont1" style="flex-wrap: nowrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-wrap: wrap </h3>
<div class="cont1" style="flex-wrap: wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-wrap: wrap-reverse </h3>
<div class="cont1" style="flex-wrap: wrap-reverse;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-flow: row nowrap</h3>
<div class="cont1" style="flex-flow: row nowrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-flow: row wrap</h3>
<div class="cont1" style="flex-flow: row wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-flow: column nowrap</h3>
<div class="cont1" style="flex-flow: column nowrap ;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-flow: column wrap</h3>
<div class="cont1" style="flex-flow: column wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-flow: column nowrap with height: 100px</h3>
<div class="cont1" style="flex-flow: column nowrap; height: 100px;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-flow: column wrap with height: 100px</h3>
<div class="cont1" style="flex-flow: column wrap; height: 100px;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

  • This 'flex-box' has following CSS styling
  • .cont1 { display: flex; width: 100%; border: 5px outset gray; background-color: whitesmoke; }
  • .cont1a { width: 70px; padding: 5px 100px; height: 40px; background-color: rgba(255, 249, 128, 0.789); border: 1px solid gray; }
1
2
3
4


flex-direction: row (default value)

1
2
3
4


flex-direction: row-reverse

1
2
3
4


flex-direction: column

1
2
3
4


flex-direction: column-reverse

1
2
3
4


flex-wrap: nowrap (default value)

1
2
3
4


flex-wrap: wrap

1
2
3
4


flex-wrap: wrap-reverse

1
2
3
4


flex-flow: row nowrap

1
2
3
4


flex-flow: row wrap

1
2
3
4


flex-flow: column nowrap

1
2
3
4


flex-flow: column wrap

1
2
3
4


flex-flow: column nowrap with height: 100px

1
2
3
4


flex-flow: column wrap with height: 100px

1
2
3
4


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Examples of 'justify-content' Property

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<h3 class="ah3 anoi">justify-content: flex-start (default value)</h3>
<div class="cont1" style="justify-content: flex-start; flex-flow: row wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">justify-content: flex-end</h3>
<div class="cont1" style="justify-content: flex-end; flex-flow: row wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <br>

<h3 class="ah3 anoi">justify-content: center</h3>
<div class="cont1" style="justify-content: center; flex-flow: row wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">justify-content: space-around</h3>
<div class="cont1" style="justify-content: space-around; flex-flow: row wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">justify-content: space-between</h3>
<div class="cont1" style="justify-content: space-between; flex-flow: row wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">justify-content: space-evenly</h3>
<div class="cont1" style="justify-content: space-evenly; flex-flow: row wrap;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

justify-content: flex-start (default value)

1
2
3
4


justify-content: flex-end

1
2
3
4


justify-content: center

1
2
3
4


justify-content: space-around

1
2
3
4


justify-content: space-between

1
2
3
4


justify-content: space-evenly

1
2
3
4


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Examples of 'align-items' Property

Code : 3 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<h3 class="ah3 anoi">align-items: stretch (default value)</h3>
<div class="cont1" style="align-items: stretch; height: 150px;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-items: flex-start</h3>
<div class="cont1" style="align-items: flex-start; height: 150px;">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-items: flex-end</h3>
<div class="cont1" style="align-items: flex-end; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-items: center</h3>
<div class="cont1" style="align-items: center; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-items: baseline / first baseline</h3>
<div class="cont1" style="align-items: baseline; height: 150px">
<div class="cont1a" style="height: 50px;">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-items: last baseline</h3>
<div class="cont1" style="align-items: last baseline; height: 150px">
<div class="cont1a" style="height: 50px;">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

align-items: stretch (default value)

1
2


align-items: flex-start

1
2


align-items: flex-end

1
2


align-items: center

1
2


align-items: baseline / first baseline

1
2
3


align-items: last baseline

1
2
3


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Examples of 'align-content' Property

Code : 4 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<h3 class="ah3 anoi">align-content: flex-start (default value)</h3>
<div class="cont1" style="align-content: flex-start; flex-flow: row wrap; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
<div class="cont1a">5</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-content: flex-end</h3>
<div class="cont1" style="align-content: flex-end; flex-flow: row wrap; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
<div class="cont1a">5</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-content: center</h3>
<div class="cont1" style="align-content: center; flex-flow: row wrap; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
<div class="cont1a">5</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-content: space-around</h3>
<div class="cont1" style="align-content: space-around; flex-flow: row wrap; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
<div class="cont1a">5</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-content: space-between</h3>
<div class="cont1" style="align-content: space-between; flex-flow: row wrap; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
<div class="cont1a">5</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-content: space-evenly</h3>
<div class="cont1" style="align-content: space-evenly; flex-flow: row wrap; height: 150px">
<div class="cont1a">1</div>
<div class="cont1a">2</div>
<div class="cont1a">3</div>
<div class="cont1a">4</div>
<div class="cont1a">5</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

align-content: flex-start (default value)

1
2
3
4
5


align-content: flex-end

1
2
3
4
5


align-content: center

1
2
3
4
5


align-content: space-around

1
2
3
4
5


align-content: space-between

1
2
3
4
5


align-content: space-evenly

1
2
3
4
5


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example of 'align-self' property

Code : 5 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<h3 class="ah3 anoi">align-self: auto</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="align-self: auto;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-self: flex-start</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="align-self: flex-start;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-self: flex-end</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="align-self: flex-end;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">align-self: center</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="align-self: center;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

align-self: auto

1
2
3


align-self: flex-start

1
2
3


align-self: flex-end

1
2
3


align-self: center

1
2
3


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example of 'flex-grow' property

Code : 6 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<h3 class="ah3 anoi">flex-grow: 0</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="flex-grow: 0;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-grow: 1</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="flex-grow: 1;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

flex-grow: 0

1
2
3


flex-grow: 1

1
2
3


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example of 'flex-shrink' property

Code : 7 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<h3 class="ah3 anoi">flex-shrink: 0</h3>
<div class="cont1" style="height: 150px; flex-flow: row nowrap;">
<div class="cont1a">1</div>
<div class="cont1a" style="flex-shrink: 0;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-shrink: 1</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="flex-shrink: 1;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex-shrink: 2</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="flex-shrink: 2;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

flex-shrink: 0

1
2
3


flex-shrink: 1

1
2
3


flex-shrink: 2

1
2
3


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Example of 'flex' property

Code : 8 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<h3 class="ah3 anoi">flex: 0 0 80px</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="flex: 0 0 80px;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

<h3 class="ah3 anoi">flex: 0 0 80px</h3>
<div class="cont1" style="height: 150px">
<div class="cont1a">1</div>
<div class="cont1a" style="flex: 1 1 80px;" >2</div>
<div class="cont1a">3</div>
</div> <br> <hr style="border: 1px solid darkcyan;"> <br>

</body>
</html>

output 📌

flex: 0 0 80px

1
2
3


flex: 0 0 80px

1
2
3


Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Styling 'Flexbox' with CSS

Code : 9 📝

<!DOCTYPE html>
<html>
<head>
<style>

.cont2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height: 300px;
background-color: #f0f0f0;
}
.item {
background: #2196f3;
color: white;
padding: 20px;
margin: 10px;
flex: 1 1 200px;
}

</style>
</head>
<body>

<div class="cont2">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
</div>

</body>
</html>

output 📌

Box 1
Box 2
Box 3
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

What's happening:

  • Items are growing and wrapping.
  • They are spaced using 'justify-content'.
  • Each has flexible width due to 'flex'.

Conclusion

Flexbox simplifies layout design in CSS. It adapts to screen sizes, aligns content easily, and reduces the need for complex floats or positioning. By understanding each property clearly, you can build cleaner and more responsive layouts.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

What is the default value of 'flex-direction'?

The default is 'row'.

Can I use Flexbox for vertical centering?

Yes, using 'align-items: center' or 'align-self: center'.

What is the difference between 'flex-grow' and 'flex-shrink'?

'flex-grow' controls how items expand; 'flex-shrink' controls how they shrink.

Is Flexbox better than Grid?

Flexbox is great for one-dimensional layouts (row or column). Use Grid for two-dimensional layouts.

Previous Post Next Post