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

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

Β·

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

Β