What is CSS Flexbox?

CSS Flexbox is a collection of multiple CSS layout properties which makes it easier to design flexible & responsive pages.

Different Flexbox properties for parent elements

display

This property is used to arrange the items in an container in either inline or block depending on the value and element. It helps in taking the only space where the content is then using other properties we can set the direction and other properties. This property is set to flex while using flexbox layout model without this other properties won't be working.

.container
{
    display: block;
    display: inline-block;
    display: none;
    display: flex;
    display: grid;
}

flex-direction

This property is used to set the direction of rows & columns and in the revered order.

.container
{
    flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
}

flex-wrap

This property is used to set the wrap behaviour. With this property the items can shrink or expand.

.container
{
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}

flex-flow

It is a combination of flex-direction & flex-wrap properties. here the first value is of flex-direction & second is for flex-wrap.

.container
{
    flex-flow: row wrap;
    flex-flow: row-reverse nowrap;
    flex-flow: column wrap-reverse;
    flex-flow: column wrap;
}

gap

This property sets the gaps between rows & columns. It takes tow values row-fap & column-gap.

.container
{
    gap:10px;
    gap:10px 20px;
}

justify-content

This property is used to align the content in horizontal direction.

.container
{
    justify-content: start;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
}

align-items

This property is used to align the content in vertical direction.

.container
{
    align-items: stretch;
    align-items: center;
    align-items: start;
    align-items: end;
}

Different Flexbox properties for child elements

order

• This property is used to set the order of items.

• The default order is 0.

• If we set 2 then all items will be arranged after 2.

• If we set -1 then all items will be arranged before 0.

flex-grow

• This property gives an item the ability to grow.

• If the value is 1 then the area is equally distributed.

• If the value is 2 then the element takes twice the area than other elements.

flex-shrink

• This property gives an item the ability to shrink.

• If the value is 2 then the element takes half the area than other elements.

align-self

• This property overrides that align-items property and gives an item the ability to align iteslf.

•     .container
      {
          align-self: stretch;
          align-self: center;
          align-self: start;
          align-self: end;
      }
  

Thanks for reading.