πŸ’Ž What is flexBox? πŸ’Ž

Abhishek PatilAbhishek Patil
4 min read

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

1
Subscribe to my newsletter

Read articles from Abhishek Patil directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Abhishek Patil
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.