flexbox css-flexbox flex flexbox tutorial

WHAT IS FLEX BOX

CSS Flexbox (Professionally refers to as CSS FLEXIBLE BOX MODEL) layout. Unlike CSS Grid, flexbox is design for one dimensional layout, that is it handles one layout at a time, which might be either columns or rows.

CSS Flexbox enable space to be evenly distributed among items, this help items to be properly align within it's flex container.

To use CSS flexbox, we have to first set the parent element to a flex container, we do this by setting the display property to flex or inline-flex. This will convert the direct children of the flex container to flex items.

Unlike the normal vertical stacking order of elements (from top to bottom) the flex items are displayed horizontally (left to right) when the parent element is set to a display of flex or inline-flex.

see illustrations below for better understanding [illus 1].

Illus 1.jpg

FLEXBOX PROPERTIES

The flexbox properties are properties that are declared on the parent of the flex-items called the flex-container.

DISPLAY PROPERTY

The CSS display property is set to flex or inline-flex to convert the parent element to a flex-container.

See the code example below.

<body>
    <div class="flex_container">
        <div class="item item1">o</div>
        <div class="item item2">c</div>
        <div class="item item3">x</div>
        <div class="item item4">i</div>
        <div class="item item5">g</div>
        <div class="item item6">i</div>
        <div class="item item7">n</div>
    </div>
</body>

from the code example above, we have a <div> tag with a class of flex_container, which serves as a wrapper to seven other <div> tags. Each out of the seven <div> tags has a class of item and item1 to item7 respectively.

See the code example below.

.item {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            background-color: #42210B;
            text-align: center;
            color: white;
            font-size: 2rem;
            text-transform: uppercase;
            margin: 5px;
        }

Our CSS section, the item class is targeted and we set them to a width and height of 60px, border-radius of 10px, background-color of dark brown #42210B, text-align to center.

From your browser output, you will see that the element are stack from top to bottom

Now that we have seen how the browser displays element normally. We are going to target the flex_container class and we are going to set the display property to flex, this should convert our element to a flex_container.

 .flex_container {
        display: flex;
    }

Your code should look like this on your browser

JUSTIFY CONTENT:

The justify-content property set how flex-items are align on the main axis (from left to right) within the flex-container.

The justify-content property takes in six values, which includes: flex-start, flex-end, center, space-around, space-between and space-evenly.

see illustrations below for better understanding.

Illus 2.jpg

flex-start: The flex-start value of justify-content property place the flex items to the left hand side within the flex-container. This is the browser default.

  .flex_container {
        display: flex;
        justify-content: flex-start;
    }

Browser output

flex-end: The flex-end value of justify-content property place the flex items to the right end side within the flex-container.

  .flex_container {
        display: flex;
        justify-content: flex-end;
    }

your code should look like this.

center: The center value of justify-content property place the flex items to the center within the flex-container.

   .flex_container {
        display: flex;
        justify-content: center;
    }

Browser output

space-around: The space-around value of justify-content property place the flex items to the center within the flex-container and add space around the left and right ends of the items and then items are evenly spaced in between.

 .flex_container {
        display: flex;
        justify-content: space-around;
    }

browser output

space-between: The space-between value of justify-content property add evenly distributed space between the flex-items with very little space around it.

  .flex_container {
        display: flex;
        justify-content: space-between;
    }

Browser output

space-evenly: The space-evenly value of justify-content property add evenly distributed space between and around the flex-items.

  .flex_container {
        display: flex;
        justify-content: space-evenly;
    }

Browser output

FLEX DIRECTION:

the Flexbox flex-direction property specify the direction of the flex-items within the flex-container. This can either be row, row reverse or column, column reverse.

see illustration below for better understanding

Illus 3.jpg

row: the row value of the flex-direction property set the flex-item to display in a row in the flex container, that is from left to right. This is usually refer to as the main axis.

This is the default as no changes is made. When we set the display property to flex, it automatically takes a flex-direction of row.

Type and write the code below

 .flex_container {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }


    .item {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

Browser output

From the code output above, notice how the word ocxigin is properly display.

row-reverse: the row-reverse value of the flex-direction property set the flex-item to display in a row in the flex container but this time in a reverse manner.

Type and run the code below

 .flex_container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-evenly;
    }

Your code should look like this.

From the code output above, notice how the word ocxigin is a spelt as nigixco in a re-verse manner.

column: the column value of the flex-direction property set the flex-item to display in a column in the flex container, that is from top to bottom. This is usually refer to as the cross axis.

Type and run the code below

  .flex_container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

Browser output

column-reverse: the column-reverse value of the flex-direction property set the flex-item to display in a column in the flex container but this time in a reverse manner.

Type and run the code below

 .flex_container {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-evenly;
    }

Browser output

ALIGN ITEMS:

The align-items property set how flex-items are align on the cross axis (from top to bottom) within the flex-container.

The align-content property takes in five values, which includes: flex-start, flex-end, center, stretch and baseline .

Just like the justify-content property, the align-items property works in a similar way but instead horizontal alignment the align-items align flex-items vertically.

For the align-items property to take effect, we have to set a define height for the flex-container.

So we set the height of the flex-container to 500px and a border-radius of 10px solid and a color dark-brown.

see illustrations for better understanding

Illus 4.jpg

NOTE: this is done so that we can visually see how the flex-items moves around the flex-container.

flex-start: The flex-start value of align-items property place the flex items to the left top edge within the flex-container.

Type and run the code below

 .flex_container {
        display: flex;
       align-items: flex-start;
       height: 500px;
       border: 10px solid #42210B;
    }

    .item {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem; 
         text-transform: uppercase;
        margin: 5px;
    }

Browser output

center: The center value of align-items property place the flex items to the left middle edge within the flex-container.

see code example below

 .flex_container {
        display: flex;
       align-items: center;
       height: 500px;
       border: 10px solid #42210B;
    }

Browser output

flex-end: The flex-end value of align-items property place the flex items to the left bottom edge within the flex-container.

Type and run the code below

.flex_container {
        display: flex;
        align-items: flex-end;
        height: 500px;
        border: 10px solid #42210B;

Browser output

stretch: The stretch value of align-items property stretches the flex items to expand from the left top edge to the left bottom edge within the flex-container.

NOTE: the stretch value will not take effect if the flex-items are set to a define height, thus height should be remove.

Type the code below to see this in action

  .flex_container {
        display: flex;
        align-items: stretch;
        height: 500px;
        border: 10px solid #42210B;
    }

    .item {
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

Browser output

baseline: The baseline value of align-items property places the flex-items to align from the contents of the flex-items irrespective of the shape or padding of each flex-items within the flex-container.

This is what is refer to as the baseline of the text.

Type the HTML code example below

  <div class="flex_container">
        <div class="item item1">This is a</div>
        <div class="item item2">Flexbox</div>
        <div class="item item3">Tutorial</div>
        <div class="item item4">created with</div>
        <div class="item item5">love by</div>
        <div class="item item6">Alex Anie</div>
        <div class="item item7">stay focus</div>
    </div>

Also type and run the CSS code below

  .flex_container {
        display: flex;
        align-items: baseline;
        height: 500px;
        border: 10px solid #42210B;
    }

    .item {
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        margin: 5px;
    }

    .item1{
         width: 60px;
        height: 60px;

    }

    .item2{
         width: 100px;
        height: 100px;

    }

    .item3{
         width: 70px;
        height: 20px;
        padding: 10px;
    }

    .item4{
         width: 80px;
        height: 50px;
        padding: 80px;
    }

    .item5{
         width: 150px;
        height: 50px;

    }

    .item6{
         width: 70px;
        height: 40px;
        padding: 60px;
    }
    .item7{
         width: 200px;
        height: 50px;
        padding: 20px;
    }

Browser output

This might be confusing for you, for better understanding lets take another example by changing the align-items value from baseline to flex-start.

Type the CSS code below

 .flex_container {
        display: flex;
        align-items: flex-start;
        height: 500px;
        border: 10px solid #42210B;
    }

Browser output

NOTICE: The differences between baseline and flex-start in the two example stated above.

FLEX WRAP:

The flex-wrap property determines weather or not our flex items appears on a new line within the flex-container when our browser is being resized. This depends on the flex-wrap property value that is assigned.

see illustrations for better understanding

Illus 5.jpg

By default flex-items are displayed horizontally on one line and remain so, even when the browser is resized. However flex-items might get smaller when the browser is resided but it will still remain on the same line. So setting our flex-wrap property to take in the value of wrap, which enable flex-items to appears on a new line when the browser is resized.

The flex-wrap property takes in three values. Namely: wrap, nowrap and wrap-reverse.

nowrap: The nowrap value of flex-wrap property set the flex-item NOT to wrap (That is not to appear on a new line) within the flex-container. This is the browser default as no changes is made.

Type the HTML code below

 <div class="flex_container">
        <div class="item item1">o</div>
        <div class="item item2">c</div>
        <div class="item item3">x</div>
        <div class="item item4">i</div>
        <div class="item item5">g</div>
        <div class="item item6">i</div>
        <div class="item item7">n</div>
    </div>

Also Type and run the CSS code below

   .flex_container {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: nowrap;
    }


    .item {
        width: 300px;
        height: 60px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

Browser output

wrap: The wrap value of flex-wrap property set the flex-item to wrap (That is to appear on a new line) within the flex-container. The smaller the browser get, the more lines the flex-items takes, as long as the define width of the flex-item can not fit-in within the flex-container, it automatically takes a new line.

Type the code below

  .flex_container {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

your browser output should look like this

For better understanding, resize your browser and see what happens.

wrap-reverse: The wrap-reverse value of flex-wrap property set the flex-item to wrap but in a reverse manner within the flex-container. Depending on the flex-direction, flex-items will run in a reverse manner. If the flex-direction is set to column, flex-items will reverse from bottom to top instead of top to bottom.

See code example below

 .flex_container {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap-reverse;
    }

Browser output

FLEX-FLOW:

The flex-flow property is combination (shorthand) of both flex-direction and flex-wrap property respectively. This means that the flex-flow property takes in two values at once. When assigning values to the flex-flow property you should first define the flex-direction as this comes first and then the flex-wrap which comes second.

The flex-flow property takes in values of both flex-direction and flex-wrap which includes: column nowrap, column-reverse, row nowrap, row nowrap, row-reverse, wrap. It doesn't stop here, you can combined the values the way you want BUT follow the appropriate order.

see code example below

   .flex_container {
        display: flex;
        justify-content: space-evenly;
       flex-flow: row wrap;
    }


    .item {
        width: 400px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

Resize your browser to see this in action

ALIGN-CONTENT:

The align-content property set how multi-line flex-items are align on the cross axis (from top to bottom) within the flex-container. Multi-line thus means items that appear on a new line due to flex-wrap.

NOTE: align-content will not take effect if the items are on a single line. that is when there is no wrap or wrap-reverse effect.

see illustration for better understanding

Illus 6.jpg

Just like the justify-content property, the aligns-content take in the same values but works on the cross-axis. The align-content is also similar to the align-items property but it does not support the baseline value of align-items.

align-content takes in the following values: normal, flex-start, flex-end, center, space-around, space-between, and stretch.

As you will see from the code example below, we added a define height of 500px and border of 4px solid of dark-brown to help us visually see the area that makes up the flex-container.

flex-start: The flex-start value of align-content property places the multi-line flex-items at the top edge within the flex-container.

see HTML code example below

 <div class="flex_container">
        <div class="item item1">o</div>
        <div class="item item2">c</div>
        <div class="item item3">x</div>
        <div class="item item4">i</div>
        <div class="item item5">g</div>
        <div class="item item6">i</div>
        <div class="item item7">n</div>
    </div>

see CSS code example below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        align-content:flex-start;
        height: 500px;
        border: 4px solid #42210B;
    }


    .item {
        width: 400px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

your code example should look like this

flex-end: The flex-end value of align-content property places the multi-line flex-items at the bottom edge within the flex-container.

see code example below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        align-content: flex-end;
        height: 500px;
        border: 4px solid #42210B;
    }


    .item {
        width: 400px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

your code example should look like this

center: The center value of align-content property places the multi-line flex-items at the middle edge within the flex-container.

see code example below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        align-content: center;
        height: 500px;
        border: 4px solid #42210B;
    }

your code example should look like this

space-between: The space-between value of align-content property add evenly distributed space between the multi-line flex-items with very little space around it on the cross axis within the flex-container.

see code example below

  .flex_container {
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
        height: 500px;
        border: 4px solid #42210B;
    }

Browser output

space-around: The space-around value of align-content property add evenly distributed space between the multi-line flex-items and a moderate space around it on the cross axis within the flex-container.

see code example below

.flex_container {
        display: flex;
        flex-flow: row wrap;
        align-content: space-around;
        height: 500px;
        border: 4px solid #42210B;
    }

your code example should look like this

GAP | ROW-GAP | COLUMN-GAP:

The gap, row-gap and column-gap property can be used to control the space between flex-items within the flex-container. Note that this will only affect the spaces between Not spaces around the flex-items.

Please not that gap, row-gap and column-gap can also be used on CSS GRID Layout.

see illustrations for better understanding

Illus 7.jpg

gap: The gap value can be used to add margin between the flex-items on both the row and column axes.

see code example below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        height: 500px;
        border: 4px solid #42210B;
        gap: 200px;
    }


    .item {
        width: 400px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

Browser output

row-gap: The row-gap value can be used to add margin between the flex-items on the row axis.

see code example below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        height: 500px;
        border: 4px solid #42210B;
        row-gap: 200px;
    }

Browser output

column-gap: The column-gap value can be used to add margin between the flex-items on the column axis.

see code example below

FLEX-ITEMS PROPERTIES

There are some properties that are meant specifically for the flex-items. These include the following:

flex-order, flex-grow, flex-shrink, flex-basis, flex (shorthand) and align-self.

ORDER

The flex-item order property is used to rearrange how the flex-items are displayed in the flex-container without you having to change the source order in your code.

The order property takes in numbers as values. And this can be either negative (-1) or positive (1) number.

The default value for the order property is 0, this means that the flex-item have no order set to them.

see illustration for better understanding

Illus 8.jpg

The flex-item with the highest number value comes last in the stacking order. Depending on the flex-direction the flex-item can either stack at the bottom (column) or right end (row).

flex-items with negative numbers comes first, either top (column) or left end (row).

For better understanding lets see how this can be done with code

<div class="flex_container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item4">item4</div>
        <div class="item item5">item5</div>
        <div class="item item6">item6</div>
        <div class="item item7">item7</div>
    </div>

Type and run the CSS code below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        border: 4px solid #42210B;
    }


    .item {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        margin: 5px;
    }

Your code should look like this

From the above code, you'll notice how every flex-items are well displayed in the correct order that they exist in the HTML code file. With item1 coming first anditem7 coming last.

What if we want item7 to come last and item1 to come first without having to edit our HTML code.

And this where the order property comes in.

Type and run the code below to see this in action

    .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        border: 4px solid #42210B;
    }


    .item {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        margin: 5px;
    }

    .item1 {
        order: 3;
    }

    .item3{
        order: 1;
    }

    .item5 {
        order: 2;
    }

    .item6 {
        order: 2;
    }

    .item7{
        order: -2;
    }

Your code should look like this

From the above code, item1 came last because it have the highest number positive value of 3, while item7 came first because it have the negative value of -2 (minus two). item5 and item6 have the same number value so item5 came first before item6 because item5 came first in our HTML source file while item3 came directly next to item5 because item5 have a higher positive value than item3.

This is a very long explanation, if you don't get it yet, it's totally fine, try read other materials for better understanding.

FLEX-GROW:

The flex-grow property is used to specify the length at which we want a particular flex-item or flex-items to grow or expand within it flex-container and how the remaining spaces should be distributed among other remaining items that don't have the flex-grow property set on them.

This might sound complicated to you at first, so let's take a look at some code example.

Type the HTML code below

<div class="flex_container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item4">item4</div>
        <div class="item item5">item5</div>
    </div>

Type and run the CSS code below

  .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        border: 4px solid #42210B;
        width: 800px;
    }


    .item {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        margin: 5px;
    }

Your code should look like this on your browser

from the code sample above, we have five flex-items with a define width of 100px each occupying a flex-container of 800px and an available space of 300px which is evenly distributed between each flex-items.

What if we want item1 to take up more width and grow larger than other items but smaller than item3. Now you guest it! this is what flex-grow is meant to do.

Type and run the code below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        border: 4px solid #42210B;
        width: 800px;
    }

    .item {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        margin: 5px;
    }

    .item1 {
        flex-grow: 1;
    }

    .item3 {
        flex-grow: 2;
    }

Your code should look like this on your browser.

From our code output above we set our item1 to a positive number of 1 (a whole number that does not have the minus (-) prefix i.e -1 ) and our item3 to 2. This cause item1 to grow and span two row and item3 to span 3 and the available space is then distributed evenly between among other items.

FLEX-SHRINK:

Just like flex-grow, flex-shrink do exactly the same thing but rather than grow its shrinks (reduce) the targeted flex-item to reduce twice it size when its set to a positive number.

Notice that 1 is the default value since no changes is made.

For better understanding, let's take a look at the following code example

<div class="flex-container">

        <div class="item item1">Lorem ipsum dolor aliqua. </div>

        <div class="item item2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. 
       </div>

      <div class="item item3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
     </div>

</div>

CSS code example below

 .flex-container {
        display: flex;
        flex-direction: row;
        width: 800px;
        border: 2px solid black;

    }

    .item {
        border: 10px solid black;
        padding: 10px;
        border-radius: 10px;
        flex-grow: 1;
        height: 100px;
    }

    .item1 {
        background-color: red;
        flex-shrink: 2;

    }

    .item2 {
        background-color: blue;
    }

    .item3 {
        background-color: green;
    }

your code should look like this on your browser[

Screenshot (74).png

from the browser output you'll notice that item1 reduces in sizes as soon as we set it to flex-shrink with a value of 2.

FLEX-BASIS:

The flex-basis property sets the flex-item to it original size without necessarily expanding or reducing the flex-items with flex-grow and flex-shrink respectively.

When we set an element to display flex, by default our element take up the size of the content of that element when a default width or height is not set. This is refer to as the flex-basis.

the flex-basis take in four values namely. number, auto, initial, inherit.

number: This can be a range of any number value and can also take in any of the CSS Length Units from px, em, rem, %, etc.
auto: The auto sets the flex-items to take the size of the content of the flex-item when a specific size is not set.
Initial: This sets the flex-item to it default value.
Inherit: This sets the flex-item to take the size of it parent

For better understanding, lets take a look at the following examples.

HTML CODE EXAMPLE

  <div class="flex-container">

        <div class="item item1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, sit repudiandae. Dolorum, doloremque! </div>
        <div class="item item2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, sit repudiandae. Dolorum, doloremque! </div>
        <div class="item item3"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, sit repudiandae. Dolorum, doloremque! </div>
        <div class="item item4"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, sit repudiandae. Dolorum, doloremque! </div>
        <div class="item item5"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, sit repudiandae. Dolorum, doloremque! </div>
    </div>

CSS code below

.flex-container {
        display: flex;
        height: 100px;
    }

    .item {
        border: 3px solid black;
        padding: 10px;
        border-radius: 10px;
        flex-basis: 300px;
    }

    .item1 {
        background-color: red;
    }


    .item2 {
        background-color: blue;
    }

    .item3 {
        background-color: green;
    }

     .item4 {
        background-color: rgb(232, 7, 253);
    }

your code should look like this on your browser

From the above code, all our element takes the value of a flex-basis of 300px, which set all our element to have equal size.

see example two for better understanding.

Type the code below

 .flex-container {
        display: flex;
        height: 100px;
    }

    .item {
        border: 3px solid black;
        padding: 10px;
        border-radius: 10px;
        flex-basis: 300px;
    }

    .item1 {
        background-color: red;
        flex-basis: auto;
    }


    .item2 {
        background-color: blue;
    }

    .item3 {
        background-color: green;
    }

    .item4 {
        background-color: rgb(232, 7, 253);
    }

your code should look like this on your browser

From the code example above, we set item1 to take a flex-basis of auto. This re-size item1 to take up the size of it content.

Notice how item1 takes up more space than other items.

FLEX (SHORTHAND PROPERTY):

The flex shorthand property for flex-items is a combination of flex-grow, flex-shrink and flex-basis on one declaration. This means instead of writing flex-grow, flex-shrink and flex-basis separately we can combined all three in one.

To use the flex shorthand property you have to write them in the appropriate order, which is:

Flex-grow is written first, then flex-shrink second and flex-basis third.

see illustration for better understanding

Illus 11.jpg

The flex shorthand property takes in the default value of the three properties in the same order mentioned above.

Type and run the code below.

 .flex-container {
        display: flex;
        height: 100px;
    }

    .item {
        border: 3px solid black;
        padding: 10px;
        border-radius: 10px;
        flex-basis: 300px;
    }

    .item1 {
        background-color: red;
        flex-basis: auto;
    }


    .item2 {
        background-color: blue;
        flex: 0 2 0;
    }

    .item3 {
        background-color: green;
    }

    .item4 {
        background-color: rgb(232, 7, 253);
    }

Your code should look like this on your browser

From the above code. We set item2 to shrink twice of it previous size by using the flex shorthand property. The flex-grow which is the first value is set to 0, this prevent it from growing and then a value of 2 for flex-shrink which reduce it to twice of it previous size, while value 0 for flex-basis, which prevent it from taking the size of it content.

ALIGN SELF:

The align-self property set how a single flex-item can be align on the cross axis (from top to bottom) within the flex-container. The align-self property do overwrite the align-items property that is set on the current flex-item that the align-self is being applied on.

see illustration for better understanding

Illus 12.jpg

The align-self property takes in six values which includes: flex-end, flex-start, center, stretch, baseline, auto.

flex-end: the flex-end value of the align-self property set only a single flex-item to the bottom within the flex-container.

Types the code below and run on your browser

 <div class="flex_container">
        <div class="item item1">o</div>
        <div class="item item2">c</div>
        <div class="item item3">x</div>
        <div class="item item4">i</div>
        <div class="item item5">g</div>
        <div class="item item6">i</div>
        <div class="item item7">n</div>
    </div>

Type and run the CSS code

.flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        height: 500px;
        border: 4px solid #42210B;
    }


    .item {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

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

Your code should look like this on your browser

flex-start: the flex-start value of the align-self property set only a single flex-item to the top within the flex-container.

Type and run the CSS code below

 .item2 {
        align-self: flex-start;
    }

center: the center value of the align-self property set only a single flex-item to the middle within the flex-container.

type and run the CSS code below

 .item2 {
        align-self: center;
    }

Browser output

stretch: the stretch value of the align-self property set only a single flex-item to expand vertically from top to bottom within the flex-container.

Note: that when you set your flex-item to stretch you should remove the height property as this will prevent it from stretching.

type and run the code below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        height: 500px;
        border: 4px solid #42210B;
    }


    .item {
        width: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

    .item1 {
        align-self: stretch;
        height: 100px;

    }
      .item2 {
        align-self: stretch;
    } 

    .item3 {
        align-self: stretch;
        height: 100px;

    }

    .item4 {
        align-self: stretch;
        height: 100px;

    }

    .item5 {
        align-self: stretch;
        height: 100px;

    }

    .item6 {
        align-self: stretch;
        height: 100px;

    }

    .item7 {
        align-self: stretch;
    }

Browser output

From the code example above, you'll notice that item2 and item7 stretch from top to bottom while other remain the same, this is due to the define height of 100px that exits within item1, item3, item4, item5 and item6.

baseline: The baseline value of align-self property places the flex-item or flex-items to align from the contents of the flex-items irrespective of the shape or padding of each flex-items within the flex-container.

Type and run the code below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        height: 500px;
        border: 4px solid #42210B;
    }


    .item {
        width: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

    .item1 {
        align-self: baseline;
        height: 100px;
        padding: 20px;

    }

    .item2 {
        align-self: baseline;
        padding: 60px;

    }

    .item3 {
        align-self: baseline;
        height: 100px;
        margin-top: 50px;
    }

    .item4 {
        align-self: flex-start;
        height: 100px;
    }

    .item5 {
        align-self: baseline;
        height: 100px;
        padding: 100px;
    }

    .item6 {
        align-self: baseline;
        height: 100px;

    }

    .item7 {
        align-self: baseline;
        padding-top: 30px;
    }

Browser output

Notice: that while other items align themselves to baseline, item4 remain stacked to the top because it was set to flex-start instead of baseline.

auto: The auto value of align-self property set the flex-item or flex-items to align based on the align-items value of it parent within the flex-container.

Type and run the code below

 .flex_container {
        display: flex;
        flex-flow: row wrap;
        /* justify-content: center; */
        align-items: center;
        height: 500px;
        border: 4px solid #42210B;
    }


    .item {
        width: 100px;
        border-radius: 10px;
        background-color: #42210B;
        text-align: center;
        color: white;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 5px;
    }

    .item1 {
        align-self: auto;
        height: 100px;
        padding: 20px;

    }

    .item2 {
        align-self: auto;
        padding: 60px;

    }

    .item3 {
        align-self: auto;
        height: 100px;
        margin-top: 50px;
    }

    .item4 {
        align-self: flex-start;
        height: 100px;
    }

    .item5 {
        align-self: auto;
        height: 100px;
        padding: 100px;
    }

    .item6 {
        align-self: auto;
        height: 100px;

    }

    .item7 {
        align-self: auto;
        padding-top: 30px;
    }

Your code should look like this when you run it on your browser

CONCLUSION:

Alright! We’ve come to the end of this tutorial.

Thanks for taking your time to read this blog post about CSS FLEXBOX FOR EVERONE

Feel free to ask questions. I’ll gladly reply back.

You can find me on Twitter and other social media @ocxigin.

Cheers

Css Flexbox For Everyone

BEGINNER GUIDE WITH CODE EXAMPLE

Table of contents

WHAT IS FLEX BOX

FLEXBOX PROPERTIES

DISPLAY PROPERTY

JUSTIFY CONTENT:

FLEX DIRECTION:

ALIGN ITEMS:

FLEX WRAP:

FLEX-FLOW:

ALIGN-CONTENT:

GAP | ROW-GAP | COLUMN-GAP:

FLEX-ITEMS PROPERTIES

ORDER

FLEX-GROW:

FLEX-SHRINK:

FLEX-BASIS:

FLEX (SHORTHAND PROPERTY):

ALIGN SELF:

CONCLUSION: