what is CSS flexbox?🤔

The flexible box module, usually refer as flexbox, helps us to design a responsive website, Before the flexbox layout module there were four layout modes:

• Block

  used for sections in a webpage

• Inline

  used for text

• Table

  used for two-dimension table data

• Positioned

  used for explicit position of an element

Main Axis

The main axis direction is defined by flex-direction, the default direction is left to right

Flexbox Elements

To start using the flexbox model, we first need to define a flex container.

    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

Flexbox Properties

👉 display

the flex container become flexible by setting the display property to flex

.container{
display: flex;
}

output:-

flex-direction property

the flex-direction defines the direction of the container

👉 column

.container {
  display: flex;
  flex-direction: column;
}

output:-

👉 column-reverse

column-reverse value stacks the flex items in vertical direction meaning from bottom to to.

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

output:-

👉 row

the row value of flex-directon stacks the flex items horizontally ( from left to write )

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

output:-

👉 row-reverse

therow-reverse stacks the flex item from right to left

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

output:-

flex-wrap property

flex-wrap property specify the flex item should wrap or not

👉 wrap

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

output:-

👉 nowrap

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

output:-

👉 wrap-reverse

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

output:-

flex-flow property

.container {
  display: flex;
  flex-flow: row wrap;
}

output:-

justify-content property

👉 center

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

output:-

👉 flex-start

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

output:-

👉 flex-end

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

output:-

👉 space-around

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

output:-

👉 space-between

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

output:-

align-items property

👉 center

.container {
  display: flex;
  align-items: center;
}

output:-

👉 flex-start

.container {
  display: flex;
  align-items: flex-start;
}

output:-

👉 flex-end

.container {
  display: flex;
  align-items: flex-end;
}

output:-

👉 stretch

.container {
  display: flex;
  align-items: stretch;
}

output:-

👉 baseline

.container {
  display: flex;
  align-items: baseline;
}

output:-

align-content property

👉 center

.container {
  display: flex;
  align-content: center;
}

output:-

👉 flex-start

.container {
  display: flex;
  align-items: flex-start;
}

output:-

👉 flex-end

.container {
  display: flex;
  align-items: flex-end;
}

output:-

👉 stretch

.container {
  display: flex;
  align-items: stretch;
}

output:-

👉 space-around

.container {
  display: flex;
  align-items: space-around;
}

output:-

👉 space-between

.container {
  display: flex;
  align-items: space-between;
}

output:-

👉 Perfect Centering

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

output:-

resources:-

CSS flexbox flextbox Game