Devabs Blogs
💎 What is flexBox? 💎

💎 What is flexBox? 💎

Abhishek Patil's photo
Abhishek Patil
·

4 min read

Table of contents

Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout.

👉🏻Properties of flexbox:-

  • PART - I

🔥1. flex-direction:-

  1. row (default)
  2. row-reverse
  3. column
  4. column-reverse

🔥2. flex-wrap:-

  1. nowrap (default)
  2. wrap
  3. wrap-reverse

🔥3. flex-flow :-

This is a shorthand for the flex-direction and flex-wrap properties

🔥4. justify-content:-

  1. flex-start (default)
  2. flex-end
  3. start
  4. end
  5. left
  6. right
  7. center
  8. space-between
  9. space-around
  10. space-evenly

🔥5. align-items:-

  1. flex-start / start / self-start
  2. flex-end / end / self-end
  3. center
  4. baseline

FELXBOX

To use flexbox we will use the display property.

Let's first see the OUTPUT without flex.

HTML ->

<body>
    <div class="box"><img src="./logo.svg" alt="Lco Logo" /></div>
    <div class="box"><img src="./logo.svg" alt="Lco Logo" /></div>
    <div class="box"><img src="./logo.svg" alt="Lco Logo" /></div>
    <div class="box"><img src="./logo.svg" alt="Lco Logo" /></div>
</body>

CSS ->

.box {
  width: 120px;
  height: 120px;
  background-color: #0d1117;
  margin: 15px;
  display: grid;
  place-items: center;
}

OUTPUT ->

1.png

Now let's use display: flex; property on the parent container

body {
  display: flex;
}

2.png

✅ flex-direction:

HTML ->

  <body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </body>

CSS ->

body {
  display: flex;
  flex-direction: row | column | row-reverse | column-reverse;
}

➡️ flex-direction: row;

3.png

⬅️ flex-direction: row-reverse;

4.png

⬇️ flex-direction: column;

5.png

⤴️ flex-direction: column-reverse;

6.png

✅ felx-wrap:

🎁flex-wrap: wrap;

body {
  display: flex;
  flex-wrap: wrap;
}

.box:nth-child(2) {
  width: 300px;
}

7.png

🎁 flex-wrap: nowrap;

8.png

🎁 flex-wrap: wrap-reverse;

9.png

✅ flex-flow:

This is a shorthand for the flex-direction and flex-wrap properties together.

body {
  display: flex;
  flex-flow: column wrap;
}

10.png

✅ justify-content:

body {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

🚀 justify-content: flex-start;

11.png

🚀 justify-content: flex-end;

12.png

🚀 justify-content: center;

13.png

🚀 justify-content: space-between;

14.png

🚀 justify-content: space-around;

15.png

🚀 justify-content: space-evenly;

16.png

✅ align-items:

.container {
  width: 600px;
  height: 260px;
  margin: 2rem;
  border: 2px solid black;
  display: flex;
  align-items: stretch | flex-start | flex-end | center | baseline;
}

📢 align-items: flex-start;

17.png

📢 align-items: flex-end;

18.png

📢 align-items: center;

19.png

📢 align-items: stretch;

20.png

📢 align-items: baseline;

21png.png

- PART - II

🔥1. ORDER:

🔥2. FLEX-GROW:

🔥3. FLEX-SHRINK:

🔥4. FLEX-BASIS:

🔥5. ALIGN-SELF:

✅ ORDER PROPERTY

Output without applying order property ::

22.png

.box:nth-child(1) {order: 3;}
.box:nth-child(2) {order: 4;}
.box:nth-child(3) {order: 1;}
.box:nth-child(4) {order: 5;}
.box:nth-child(5) {order: 2;}

Output after applying order property ::

23.png

✅ FLEX-GROW

Output without applying felx-grow property ::

24.png

.box:nth-child(1){flex-grow: 1;}
.box:nth-child(2){flex-grow: 1;}
.box:nth-child(3){flex-grow: 2;}
.box:nth-child(4){flex-grow: 1;}
.box:nth-child(5){flex-grow: 1;}

Output after applying flex-grow property ::

25.png

✅ FLEX-SHRINK

Output without applying felx-shrink property ::

24.png

.box:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1;
}
.box:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
}
.box:nth-child(3) {
  flex-grow: 1;
  flex-shrink: 2;
}
.box:nth-child(4) {
  flex-grow: 1;
  flex-shrink: 1;
}
.box:nth-child(5) {
  flex-grow: 1;
  flex-shrink: 1;
}

Output after applying flex-shrink property ::

27.png

✅ FLEX-BASIS

Output without applying felx-basis property ::

24.png

.box:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1;
}
.box:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
}
.box:nth-child(3) {
  flex-grow: 1;
  flex-shrink: 2;
}
.box:nth-child(4) {
  flex-grow: 1;
  flex-shrink: 1;
}
.box:nth-child(5) {
  flex-grow: 1;
  flex-shrink: 1;
}

Output after applying flex-basis property ::

29.png

✅ ALIGN-SELF

Using the align-self property we can place an individual item inside the parent container.

.box:nth-child(1) { align-self: flex-start; }
.box:nth-child(2) { align-self: flex-end; }
.box:nth-child(3) { align-self: center; }
.box:nth-child(4) { align-self: baseline; }
.box:nth-child(5) { align-self: stretch; }

30.png

Do you find it helpful? 🤗

Let me know in the comments. 🙋‍♂️

CSS Grid Comming Soon 🔜

Follow me on Instagram -> Abhishek Patil

flexboxLearn Code Online@hiteshchoudharylcocss flexbox cheatsheet#iNeuron #HiteshChaudhary #WebDev #Javascript #LCO #LearnCodeOnline #LCO #css #learncodeonline #cssselectors @hiteshchoudharylco code with hitesh choudhary