Learning Flexbox in CSS

Flexbox is a CSS one-dimensional layout model used for laying out items (HTML elements) in a row or column fashion.

Flexbox is used to make responsive layouts & components on a webpage. The flexbox layout aims at providing a more efficient way to lay out, align and distribute space among items in a container even when size is unknown.

The Flexbox layout is appropriate to the components of an application and small-scale layouts.

In the flexbox property, we need to think in terms of two axes - The main axis and the cross axis. The main axis is defined by the flex-direction property and the cross-axis runs perpendicular to it.

Flexbox involves a lot of things including its whole set of properties.

Syntax:

display: flex | inline-flex

This defines a flex container, inline or block depending on the given value. It enables a flexible context for all its children.

Flex-direction:-

The main axis is defined by the flex-direction which has four possible values:

• row

• row-reverse

• column

• column-reverse

The row-reverse value is very useful in the Arabic language's website

HTML Code

<div class="container">
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
        <div class="item">four</div>
        <div class="item">fivee</div>

     </div>

CSS Code:

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


    }
   .item{
    height: 200px;
    width: 150px;
    border: 2px solid black;
    margin: 10px;
    text-align: center;
    background-color: purple;
   }

Results:

Flex-Wrap:

flex-wrap property is used for wrapping flex-item inside flex-container.

syntax - flex-wrap: wrap | nowrap

HTML Code

 <div class="container">
       <div class="item">one</div>
       <div class="item">two</div>
       <div class="item">three</div>
       <div class="item">four</div>
       <div class="item">fivee</div>
       <div class="item">six</div>
       <div class="item">seven </div>
       <div class="item">eight</div>
       <div class="item">nine </div>
       <div class="item">ten</div>
    </div>

CSS Code

 .container{
          display: flex;
          flex-wrap:wrap;

      }
     .item{
      height: 200px;
      width: 150px;
      border: 2px solid black;
      margin: 10px;
      text-align: center;
      background-color: purple;
     }

Result of wrapping the container:

Result of not Wrapping the container:

Justify-content:

The justify-content property defines how the browser distributes the space between and around content items along the main axis of a flex container.

syntax: justify-content: start | center | space-between | space-around | space-evenly

Align-content:

This property only takes effect on multi-line flexible containers.

A single-line flexible container will not reflect align-content.

syntax: align-content: start | centre | space=between | space-around

Properties applied to flex item:

To have more control over flex items we can target them directly. we do this by three properties:

• flex-grow

• flex-shrink

• flex-basis

flex-grow:

With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis.

HTML Code:

<div class="container">
       <div class="item one">one</div>
       <div class="item">two</div>
       <div class="item">three</div>


    </div>

CSS Code:

.container{
            display: flex;

        }
        .one{
            flex-grow: 1;
        }
    .item{
        height: 50px;
        width: 50px;
        border: 2px solid black;
        margin: 10px;
        text-align: center;
        background-color: purple;
    }

Results:

Flex-shrink:

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

HTML Code:

 <div class="container">
       <div class="item one">I Shrink</div>
       <div class="item">two</div>
       <div class="item">three</div>


    </div>

CSS Code:

 .container{
            display: flex;

        }
        .one{
              flex-shrink: 2;
        }
    .item{
        height: 50px;
        width: 500px;
        border: 2px solid black;
        margin: 10px;
        text-align: center;
        background-color: purple;
    }

Results:

Flexbox is a good option for centring things in CSS. Make sure whatever elements you want to center their parent element would have width and height defined and give parent element justify-content: center and align-content: center;

I hope you must get an idea about CSS Flexbox.

Thank you for reading.

Till then keep learning and keep exploring.