Skip to main content
HashnodeDevabs Blogs

Command Palette

Search for a command to run...

💎 What is flexBox? 💎

Updated
•4 min read•View as Markdown
💎 What is flexBox? 💎
A
Abhishek Patil

Hey! I'm Abhishek Patil, a tech lover who's always excited about checking out new stuff. I'm all about diving into the latest gadgets and software, and I'm eager to grow within the tech community.

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

#flexbox#learncodeonline#hiteshchoudharylco#css-flexbox-cheatsheet#ineuron-hiteshchaudhary-webdev-javascript-lco-learncodeonline-lco-css-learncodeonline-cssselectors-hiteshchoudharylco-code-with-hitesh-choudhary

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Devabs Blogs

8 posts