Today you will learn about Flexbox. Flexbox nowadays is used so much that you can't ignore it. I love the Flex system in CSS. they give so much control to position elements on the screen. so in this entire reading, we will see such a use case. Let's start.

Have you ever centered the element to screen using margin-top, well that's the old method now, and honestly not proper use.

Let's do it in the Flexbox way.

HTML:

<div class="container">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
</div>

CSS:

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lco-logo {
  width: 100px;
  height: 100px;
}

Result:

Screenshot 2022-08-01 at 4.52.42 PM.png

not only this, flexbox has many use cases, let's explore them one by one.

How to use flexbox

to use flexbox, we have to use display: flex; on the outer container. so we can use flexbox properties.

flex-direction

We can define flex-direction as either row or column. on the website when you use display: flex; by default direction will be row.

flex-direction: row | row-reverse | column | column-reverse;

Let's see the usage.

HTML:

<div class="container">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
  <img src="https://asset-cdn.learnyst.com/assets/schools/2410/resources/images/logo_lco_4dsl6o.png" alt="img" class="lco-logo">
</div>

CSS:

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;
}
.lco-logo {
  width: 100px;
  height: 100px;
}

Result:

Screenshot 2022-08-01 at 5.01.19 PM.png

justify-content

justify content works on the main axis, if flex-direction is set to row then justify-content align content on row. let's see example.

justify-content: center

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}
.lco-logo {
  width: 100px;
  height: 100px;
}

Screenshot 2022-08-01 at 5.10.03 PM.png

justify-content: space-between

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
}
.lco-logo {
  width: 100px;
  height: 100px;
}

Screenshot 2022-08-01 at 5.11.01 PM.png

similarly, we have space-around and space-evenly, flex-start, flex-end.

Screenshot 2022-08-01 at 5.11.58 PM.png

align-items

this property works on a different axis, we can call it a secondary axis, if the direction is set to row, this will work on top-to-bottom.

align-items: flex-start | flex-end | center

flex-wrap

flex wrap is very useful when the content is overflowing, or squizzing into the container, we can use the wrap, so the remaining items will be moved to the next line.

without flex-wrap

Screenshot 2022-08-01 at 5.21.00 PM.png

with flex-wrap

.container {
  flex-wrap: wrap;
}

Screenshot 2022-08-01 at 5.22.56 PM.png

Guide to Flexbox

Comments

More from this blog

How to convert an image to WebP in NodeJS Express Backend

Javascript Interview Cheatsheet

Let's explore JavaScript Array Methods

Getting Started with Tailwind CSS

How to use flexbox

flex-direction

justify-content

justify-content: center

justify-content: space-between

align-items

flex-wrap

Command Palette

Comments

More from this blog

How to use flexbox

flex-direction

justify-content

justify-content: center

justify-content: space-between

align-items

flex-wrap