what is CSS flexbox?🤔

The adaptable box module, normally suggest as flexbox, assists us with planning a responsive site, Before the flexbox design module there were four format modes:

• Block

  utilized for segments in a page

• Inline

  utilized for text

• Table

  utilized for two-aspect table information

• Positioned

  utilized for the express place of a component

Primary Axis

The primary hub course is characterized by flex-bearing, the default heading is left to right

Flexbox Elements

To begin utilizing the flexbox model, we first need to characterize a flex holder.

      <div class="container"
        <div1</div
        <div2</div
        <div3</div
      </div

Flexbox Properties

🎯 show

the flex holder becomes adaptable by setting the showcase property to 'flex'

  .container{
  show: flex;
  }

###

flex-course property

the flex-course characterizes the bearing of the holder

🎯 segment

  .holder {
    show: flex;
    flex-course: section;
  }

###

🎯 section switch

'section switch' esteem stacks the flex things in vertical course importance from base to.

  .holder {
    show: flex;
    flex-course: segment switch;
  }

###

🎯 line

the 'line' worth of flex-direction stacks the flex things evenly ( from left to compose )

  .holder {
    show: flex;
    flex-course: line;
  }

###

🎯 line switch

the'row-invert' stacks the flex thing from right to left

  .holder {
    show: flex;
    flex-course: line switch;
  }

###

flex-wrap property

'flex-wrap' property indicate the flex thing ought to wrap or not

🎯 wrap

  .holder {
    show: flex;
    flex-wrap: wrap;
  }

🎯 nowrap

  .holder {
    show: flex;
    flex-wrap: nowrap;
  }

🎯 wrap-invert

  .holder {
    show: flex;
    flex-wrap: wrap-invert;
  }

flex-stream property

  .holder {
    show: flex;
    flex-stream: line wrap;
  }

legitimize content property

🎯 focus

  .holder {
    show: flex;
    legitimize content: focus;
  }

🎯 flex-start

  .holder {
    show: flex;
    legitimize content: flex-start;
  }

🎯 flex-end

  .holder {
    show: flex;
    legitimize content: flex-end;
  }

🎯 space-around

  .holder {
    show: flex;
    legitimize content: space-around;
  }

🎯 space-between

  .holder {
    show: flex;
    legitimize content: space-between;
  }

adjust things properly

🎯 focus

  .holder {
    show: flex;
    adjust things: focus;
  }

🎯 flex-start

  .holder {
    show: flex;
    adjust things: flex-start;
  }

.

🎯 flex-end

  .holder {
    show: flex;
    adjust things: flex-end;
  }

🎯 stretch

  .holder {
    show: flex;
    adjust things: stretch;
  }

🎯 gauge

  .holder {
    show: flex;
    adjust things: gauge;
  }

adjust content property

🎯 focus

  .holder {
    show: flex;
    adjust content: focus;
  }

🎯 flex-start

  .holder {
    show: flex;
    adjust things: flex-start;
  }

🎯 flex-end

  .holder {
    show: flex;
    adjust things: flex-end;
  }