CSS Flex Container

CSS Flex Container


CSS Flex Container
As we have seen flex container before now we will see the properties and examples with them - 
Example -  A basic flex layout
<style>
.container {
display: flex;
flex-direction: row;
border: 1px solid black;
}
.item,
.item2,
.item3 {
background: rebeccapurple;
font-size: 3rem;
padding: 2rem;
color: white;
}
.item2 {
background: skyblue;
}
.item3 {
background: orangered;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
Output - 
Sizing  -
What happens if the flex items don’t fit within the flex container? To better see the boundaries of the container in the next example, we’ll add some padding to it - 
Example - A flex container that is not wide enough to fit its items
<style>
.container {
border: 1px solid black;
padding: 0.5rem;
width: 500px;
display: flex;
flex-direction: row;
}
.item {
width: 300px;
text-align: center;
color: white;
font-size: 2rem;
}
.one {
background: blue;
}
.two {
background: red;
}
.three {
background: green;
}
</style>
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
</div>
Output -
Properties -
Now we will see all the properties attached to the flex with there definition and Examples - 
Basically we have main 4 properties - 
1. flex-wrap (container) 
One possible solution to the preceding problem is to use the flex-wrap property. When flex-wrap is set to wrap on the flex container, its flex items will wrap to the next line. 
Example -  The flex-wrap property
<style>
.container {
border: 1px solid black;
padding: 0.5rem;
width: 120px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 300px;
text-align: center;
color: white;
font-size: 2rem;
}
.one {
background: blue;
}
.two {
background: red;
}
.three {
background: green;
}
</style>
<div class="container">
<div class="item one">Item 1</div>
<div class="item two">Item 2</div>
<div class="item three">Item 3</div>
</div>
Output  -
2. flex-grow (item)
By default, if the items are not large enough to fill the container, there will be empty space.
Example  - Empty space in the container
<style>
.container {
border: 1px solid black;
padding: 0.5rem;
width: 500px;
display: flex;
flex-direction: row;
}
.item {
width: 100px;
text-align: center;
color: white;
font-size: 2rem;
}
.one {
background: blue;
}
.two {
background: red;
}
.three {
background: green;
}
</style>
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
</div>
Output -
This behavior can be controlled with the flex-grow property, which is set on the flex item rather than the container. By default, this is 0, which means the items won’t grow at all. flex-grow is a relative measure. If all of the items are set to flex-grow: 1, they will all grow equally to fill the space. 
Lets correct that -
Example -  Adding the flex-grow property
<style>
.container {
border: 1px solid black;
padding: 0.5rem;
width: 500px;
display: flex;
flex-direction: row;
}
.item {
width: 100px;
text-align: center;
color: white;
font-size: 2rem;
flex-grow: 1;
}
.one {
background: blue;
}
.two {
background: red;
}
.three {
background: green;
}
</style>
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
</div>
Output - 
3. flex-shrink (item)
We saw earlier that if the flex items exceed the size of the container, the browser will try to shrink them to fit. 
By default, it will try to shrink all elements evenly. 
Just like we can control growth with flex-grow, we can also control shrinking with flex-shrink. 
The flex-shrink property specifies the amount of shrinking that can be done to a flex item relative to the other items. 
This defaults to 1, which is why all of the elements were shrunk evenly.
Example -  Specifying a flex-shrink of 2
<style>
.container {
border: 1px solid black;
padding: 0.5rem;
width: 300px;
display: flex;
flex-direction: row;
}
.item {
width: 200px;
font-size: 2rem;
color: white;
text-align: center;
}
.one {
background: blue;
}
.two {
background: red;
flex-shrink: 2;
}
.three {
background: green;
}
</style>
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
</div>
Output - 
4. flex-basis (item)
The flex-basis property sets the initial size of a flex item along the main axis before flex-grow and flex-shrink factors are applied.
5. Justify-content
The justify-content property, set on the container, controls how flex items are aligned/spaced along the main axis. 
By default, this is set to flex-start. 
This means the items are bunched together at the beginning of the main axis.
6. align-items (container)
The align-items property is also set on the container. 
It controls how flex items are aligned along the cross axis.
The default value is stretch, which will stretch items along the cross axis to fill the container’s size, while respecting height and width constraints.