Advance CSS Flex box

Flex box is one of modern ways to embed the content in a page. you should follow these steps to correctly align content.

1- Make the container to be a flex container by setting it’s display property to flex.

display: flex;

2- In flex box we have two axis: main axis and cross axis. and its depends to flex-direction property. flex-direction has four value: row, column, row-reverse and column-reverse. it’s default value is row.

flex-direction: row;
flex-direction: column;
flex-direction: column-reverse;
flex-direction: column-reverse;

If the flex-direction property set to row, it’s children nodes will placed horizontally next to each other. Otherwise if it’s value set to column the children is going to placed vertically. If you set flex-direction to row-reverse this will reverse the children and align them horizontally and if set to column-reverse this will also reverse the children and align them vertically.

For example:

<style>
#box-container {
background-color: lightGray;
height: 500px;
display: flex;
flex-direction: column;
}
#box-1 {
background-color: dodgerblue;
width: 20%;
height: 20%;
}
#box-2 {
background-color: orangered;
width: 20%;
height: 20%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

3- To align children across main axis you should use from justify-content property it has six value: center, flex-start, flex-end, space-between, space-around, space-evenly. it’s default value is flex-start.

justify-content: center;
justify-content: flex-start;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

1- justify-content: center: Means place children at the center of container across the main axis.

2- justify-content: flex-start: Means place children at the beginning of container across main axis.

3- justify-content: flex-end: Means place children at the end of container across main axis.

4- justify-content: space-between: This will place children next to edge of container across the main axis and place the remaining space of container between children.

5- justify-content: space-around: Means place children across main axis, so that the distance between edge of container and it’s child be half of distance between two children that are next to each other.

6- justify-content: space-evenly: Means place children across main axis, so that the distance between edge of container and it’s child be same as distance between two children that are next to each other.

For example,

<style>
#box-container {
background-color: lightGray;
height: 500px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
#box-1 {
background-color: dodgerblue;
width: 20%;
height: 20%;
}
#box-2 {
background-color: orangered;
width: 20%;
height: 20%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

4- Align children along the cross axis, this will be done by using align-items property. It has four value: center, flex-start, flex-end, baseline, stretch. The default value for this property is flex-start.

align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;
align-items: stretch;

1- align-items: center: This will place items at the center of container along the cross axis.

2- align-items: flex-start: This will place children at the start of container along the cross axis.

3- align-items: flex-end: This will place children at the end of container along the cross axis.

4- align-items: baseline: This will align the children base on their baseline, baseline is a text concept, that’s mean the line that the text are sit on.

5- align-items: stretch: This will stretch the children to fill the flex container along the cross axis. For example

<style>
#box-container {
background-color: lightGray;
height: 500px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
#box-1 {
background-color: dodgerblue;
width: 20%;
height: 20%;
}
#box-2 {
background-color: orangered;
width: 20%;
height: 20%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

5- Align one of children along cross axis, this means you can decide place for any child one by one, by using align-self. this will accept same values as align-items and overwrite the value of align-items for any child you use.

align-self: center;
align-self: flex-start;
align-self: flex-end;
align-self: baseline;
align-self: stretch;

For example:

<style>
#box-container {
background-color: lightGray;
display: flex;
height: 500px;
align-items: flex-start;
justify-content: center;
}
#box-1 {
background-color: dodgerblue;
align-self: center;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
align-self: flex-end;
height: 200px;
width: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

6-flex-grow this property will control size of child when it’s parent container expands. For example if you set flex-grow property of a child to 3 and the other properties to 1, the property with flex-grow 3 will grow 3 times as much as others.

flex-grow: 3;

This property allow any child to grow as much as it’s container has free size. If you set flex-grow: 1 to a child this will expand as much as it’s container has free space.

For example:

<style>
#box-container {
background-color: lightGray;
height: 500px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
#box-1 {
flex-grow: 1;
background-color: dodgerblue;
width: 20%;
height: 20%;
}
#box-2 {
flex-grow: 2;
background-color: orangered;
width: 20%;
height: 20%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

7- flex-shrink this property is the opposite of flex-grow. this will control the size of child when it’s parent container shrink.

flex-shrink: 3;

For example:

<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
width: 100%;
height: 200px;
flex-shrink: 1;
}
#box-2 {
background-color: orangered;
width: 100%;
height: 200px;
flex-shrink: 3;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

8- flex-wrap This property allow children to split into multiple rows or columns, by default flex box will fit all items together. For example, a row will all be on one line. it has three values: nowrap, wrap, wrap-reverse.

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

The value nowrap is the default value and it doesn’t wrap items. If you set flex-wrap property to wrap it will split children into multiple rows or columns. The break point of where the wrapping happens depend on the size of items and the size of the container. If you set wrap-reverse it will reverse the items and wrap them in the container. For example

<style>
#box-container {
background: gray;
display: flex;
height: 100%;
flex-wrap: wrap;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>

9- flex-basis

With this property you can set the initial size of any child before adjustment with flex-shrink or flex-grow.

The units are used for flex-basis is same as other sizes, like (em, px, %, ect…) the value auto sizes the items base on the content. For example:

<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
flex-basis: 10em;
}
#box-2 {
background-color: orangered;
height: 200px;
flex-basis: 20em;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

10- There is a shortcut to set several flex properties at once. The flex-grow, flex-shrink, flex-basis can all be set together by using the flex property.

For example,

flex: 1 2 40px;

This means: flex-grow: 1, flex-shrink: 2: flex-basis: 40px;

For example:

<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
flex: 2 2 150px;
height: 200px;
}
#box-2 {
background-color: orangered;
flex: 1 1 150px;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

11- Order The order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.

order: 1

For example:

<style>
#box-container {
background-color: lightGray;
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
order: 2;
height: 200px;
width: 200px;
}
#box-2 {
background-color: orangered;
order:1;
height: 200px;
width: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>

I hope it helps you with your career! thanks for reading.

https://twitter.com/MarufSharifi