CSS Flexbox

CSS Flexbox

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

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;
}

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;
}

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;
}

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;
}

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

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

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;
}

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

.container
{
    align-items: stretch;
    align-items: center;
    align-items: start;
    align-items: end;
}
  • 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.

  • 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.

  • This property gives an item the ability to shrink.

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

  • 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;
        }
    

Did you find this article valuable?

Support Jay Malde by becoming a sponsor. Any amount is appreciated!