Mastering CSS Flexbox

Mastering CSS Flexbox

A complete guide to flexbox

ยท

6 min read

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

ย