DEV Community: Khushboo Chaturvedi

Interfaces in TypeScript

Khushboo Chaturvedi — Fri, 15 Jul 2022 19:25:04 +0000

Abstract

An interface allows us to enforce a certain structure for an entity to follow. An interface contains the names and types of all the properties. It also includes the function signature, as well as the type of arguments and return type.

If a class implements an interface, it has to abide by it. That is, that class will have to implement all the properties and methods in that interface along with their types.

An interface acts as a contract with our application. It states what needs to be done but doesn't specify how it will be done. Further we cannot instantiate an interface. It can only be referenced by the class object that implements it.

Why Interfaces?

Interfaces helps maintain consistency in our code. It adds the functionality of strong type checking for your functions, variables, or the class that is implementing the interface. If an entity fails to properly implement an interface,the compiler will throw an error. This allows us to detect problems before they occur, which is definitely advantageous and simplifies maintenance in the long run.

Further Interfaces helps to improve the performance of JavaScript engines by making just one shape of the type of the interface and each of the objects just stores corresponding values of the properties as defined in the interface.

We should use an interface for the following:

Validating specific structure of properties
Objects as parameters
Objects returned from functions

Declaring Interfaces

We declare an interface using the interface keyword in a .ts file. The following example shows an example of the syntax:

interface Person {
  name: string;
  age: number;
  speak(a: string): void;
  spend(a: number): number;
}

Here we've created an interface Person with properties name which is a string and age which is a number. Then, we have two methods namely speak which takes in a parameter of type string and returns void and spend which takes in a parameter of type number and returns number.

Now let us implement the interface:

let me: Person = {
    name: 'shaun',
    age: 30,
    speak(language: string): void {
            console.log(text);
    },
    spend(amount: number): number {
            console.log('I spent ', amount);
            return amount;
    },
}

Here we have created an object me of type Person. Now, the compiler will expect the me object to have all the properties of the Person interface. If even one of the properties is missing or if its value isn't of the same type specified in the interface, the compiler will throw an error.

Specifying Optional Properties

In the previous code sample, all properties in the interface are required. There are certain cases, however, where we would expect our objects to have properties that are optional. We can achieve this by placing a question mark (?) just before the property's type annotation when declaring the interface:

interface Post {
  title: string;
  content: string;
  tags?: string[];
}

In the above code, we are telling the compiler that it is possible to have Post objects without tags.

Specifying Read-only properties

A read-only property can only be changed when an object is created for the first time. That is, if you attempt to reassign its value, the compiler will generate an error.

We can mark a property as read-only by adding the readonly keyword before a property's name.

interface PlacedOrder {
  itemsInOrder: number;
  totalCost: number;
  readonly dateCreated: Date;
}

readonly vs const

The easiest way to remember whether to use readonly or const is to ask whether you're using it on a variable or a property. Variables use const whereas properties use readonly.

Interface As Functions

TypeScript interfaces can also be used to annotate functions. We can do so by creating a callable signature inside the interface.This is like a function declaration with only the parameter list and return type given.

interface SumFunc {
  (a: number, b: number): number;
}

const add: SumFunc = (num1, num2) => {
  return num1 + num2;
}

Apart from this, the function parameters can also be declared as the type of an interface.

Interface As Class Types

Interfaces can also be used to properly type classes created in JavaScript. To achieve this, we create an interface that contains the class' properties and methods, then we use the_implements_ keyword when creating our class.

interface Person {
  name: string;
  age: number;
speak(a: string): void;
spend(a: number): number;
}

class Me implements Person{
     name: string;
    age: number;
   speak(a: string): void;
   spend(a: number): number;
  private idNumber: number;

   constructor(name: string, age: number) {
       this.name = name;
       this.age = age;
   }
}

Please note, the interface defines only the public properties of a class rather than both the public and private side.

Generic Interfaces

You may not always be sure of the type of data that each property in your interface contains. The simplest method would be to simply add any type to such properties. This, however, would make our code less type-safe.

To assist with scenarios like this, TypeScript allows you to create generic interfaces. Generic interfaces are defined in the same way as regular interfaces, but they allow you to provide one or more parameters in the interface's description which are further used to specify the type of a property inside the interface.

We can create a generic interface by passing type parameters, using angle brackets(<>), to our interface.

interface ApiData<T> {
  payload: T[];
  code: number; 
  date: Date;
}

interface UserData {
  name: string;
  email: string;
}

async function loadDataFromApi() {
 const data: ApiData<UserData> = await fetch('/some/api/endpoint'')
}

Here the "ApiData" converts to:

interface ApiData<T> {
 payload: UserData[];
 code: number;
 date: Date;
}

Extending an Interface

Just like in classes, the interface can also inherit from single or multiple interfaces as well as a class. To extend an interface, we use the extends keyword. We can extend multiple interfaces when they are separated by commas.

interface PetsInterface {
  name: string;  
}
interface DogInterface extends PetsInterface {
  breed: string;
}
interface CatInterface extends PetsInterface {
  breed: string;
}
class Cat implements CatInterface {
  name: string = 'Garfield';
  breed: string = 'Tabby';
}
class Dog implements DogInterface {
  name: string = 'Rover';
  breed: string = 'Poodle';
}

Conclusion

Interfaces defines the structure for entities to follow and they can be implemented by functions or classes. We can define optional properties on an interface using ? and read-only properties by using the readonly keyword in the property name.
Interfaces can be extended to import properties of other interfaces or classes using the extends keyword.
We can use generics with interfaces to create reusable components.
Interfaces also help in improving the performance of JavaScript engines.

References:

My Winter Of Code 2.0 experience at Moja Global

Khushboo Chaturvedi — Fri, 04 Feb 2022 17:53:06 +0000

Hey Folks!
I recently got selected as a mentee under Moja Global via WOC 2.0. It was my first time working with a large organization, and it has been a fantastic journey so far. I'll share my overall experience and learnings from this program in this blog.

About WOC 2.0

WOC 2.0 is a two-month-long open-source program made on the lines of GSOC, organized by IIIT Kalyani and 10+ other GDSCs. There were a lot of open-source organizations, each having different projects. Like in GSOC, the participants had to submit their proposals for the organizations they were interested in. The mentors then selected them based on the same.

Choosing an organization and The Proposal Writing Process

I was familiar with HTML, CSS and Javascript. I started to look for an organization that had the requirement for the same tech stack. The project which caught my interest was Moja Global's 'Community Website.' The hard part was to write a proposal for that project. Writing a proposal for the very first time could be daunting. Developing an idea of how I plan to execute the project requirements and then lay down a roadmap was challenging. The key is to communicate with the mentors. Ask any doubts you may have and discuss the ideas you come up with. Also, getting your proposal reviewed by someone is crucial. My mentor, Harsh, was very helpful and thorough in clearing any doubts. My GDSC Lead, Shubham, was kind enough to help me with the review.
My proposal was focused on refurbishing the community website. I took inspiration from the community websites of many different organizations, including LAYER5, Kubernetes and Apache. I proposed ideas to make the UI of the community website of Moja global more modern and make the overall website look more organized. I also suggested fixing the responsivity issues and functionality bugs in the website.
I was ecstatic when I got my selection mail. All the hard work I put into writing my proposal paid off :)

Experience working with Moja Global

"Amazing" is the word. I have learned many things in the past two months and met so many amazing people. My first task included redesigning the website footer. Moja Global's community website is primarily written in ReactJS and Docusaurus. I am a beginner in both of these, and thus it took me some time to get comfortable with it. I had to swizzle the footer code, rearrange the JSX, and write a lot of CSS. I also had to make the footer mobile responsive, as it was too long in the mobile view. It took me a week to accomplish all of this. The next task Harsh gave me was a bit more challenging. It was to redesign the Roadmaps page. I already had experience stylizing websites made with ReactJS using CSS, but it was my first time coding in ReactJS. The hardest part was creating a state-based solution for opening and closing the dropdown menus. After watching a dozen ReactJS tutorials on Youtube and surfing through even more Stackoverflow answers, I was finally able to make them work. All this while we had our regular bi-weekly meets where we used to discuss our progress and clear any doubts with the mentors, I found that a nice way to keep in touch with the mentors and also to keep a track of each others progress.
All this while my mentors Harsh, Soham and Sarthak have been a great source of help and guidance.

Final Takeaway

Open-source could look overwhelming at times, especially when working with a large organization. But it is all about going at your pace, learning on the way, having confidence in yourself and asking for help wherever you get stuck. Learning in public is an essential part of open-source, and it is something a lot of people are sceptical about. But at the end of the day, growth occurs out of ones comfort zone.

Future Plans

The learning experience I had at Moja Global was precious. I would love to stay connected with this community and contribute to it in the future. Currently, I am looking into contributing more to the community website and exploring FLINT.

Changing Background Image Opacity Using before and after pseudo-elements

Khushboo Chaturvedi — Fri, 03 Dec 2021 13:36:10 +0000

The :before and :after pseudo-elements are a great way to add extra styling to your website without adding extra HTML that you don't really need. In this article we will be looking at one such very common practical application of these pseudo-elements.

Before we move ahead let's first have a quick go through of what pseudo-classes and pseudo-elements really are.

Pseudo-classes

Pseudo-classes are used to style elements in a particular state. For example, you might want to change the color of an icon when the user hovers over it, or you might want a button to pop up when it gets clicked by the user all of this and more can be achieved using pseudo-classes like :hover, :active, etc.

Syntax:



selector:pseudo-class {
  property: value;
}

Pseudo-elements

In contrast to Pseudo-classes, Pseudo-elements are used to style a specific part of the selected element. A pseudo-element is like adding or targeting an extra element without having to add more HTML. For example, the first letter of an element could be edited using ::first-letter pseudo-element.

Syntax:



selector::pseudo-element {
  property: value;
}

NOTE: After CSS3 came out it has become a norm to use single colon(:) for pseudo-classes and double colons(::) for pseudo-elements.

Now that we know what pseudo-selectors are, let us talk about what ::before and ::after pseudo-elements do.

before and after pseudo-elements

In simple terms, ::before and ::after pseudo-elements lets you add content before and after a selected element respectively.

Both these pseudo-elements create a child element inside an element only if you define a content property.

Let us understand it better with an example.

Let us create a div and write "there" inside it.



  <div>
    there
  </div>

Now let us create a before pseudo-element for this div and give it a content of "Hello"



  div::before{
      content: "Hello";
    }

We can see that this adds "Hello" before the content of our div.

Let us now create an after pseudo-element for our div and give it a content of "💜"



  div::after{
      content: "💜";
    }

Similarly, the after pseudo-element inserts a "💜" after the content of our div.

Things to know:

You can only insert a ::before or ::after element to an element that will accept child elements (elements with a document tree), so elements such as <img />, <video> and <input> won't work.

2) An element can have only a single before and after pseudo-element each.

But we don't usually use before and after pseudo-elements for this purpose. Instead these have more of a styling usage in our websites. We can create awesome effects and designs in our website using these two pseudo-elements. We are going to be discussing one such feature today.

Let us start by creating a div and adding a paragraph inside it and giving it a content of lorem ipsum.



  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quaerat vero eum, natus fugiat distinctio optio soluta, aperiam placeat amet consequatur cupiditate nisi inventore</p>
  </div>

Now let us give our webpage a background image.



body{
    background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

Oops! Now, we can't see our text that well. Maybe if we try reducing the opacity of our background image we can resolve this issue.



body{
    background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

Well, this didn't work like we expected it to. Although the opacity of our background image did get reduced but this also reduced the opacity of our text.

Now let us see how to solve this issue using our before and after pseudo-classes.

Let us create a before pseudo element for our div and give it an empty string as a content. Instead of before you can also create an after pseudo-element, that won't make any difference.



div::before{
      content: '';
    }

Now, let us shift the code for our background-image from body to our before pseudo-element.



div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }

The background-image can't be seen now, that is because our pseudo-element doesn't have any dimensions yet. Let us give it aposition:absolute and a height and width of 100% each so that it covers the entire screen height.



div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      height: 100%;
      width: 100%;
    }

But we can still see some white spaces. To fix that we will give it a top: 0 and a left: 0



div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

Now, our image covers the screen properly but it is on top of our text at the moment. To fix this we will give our pseudo-element a z-index: -1.



div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

This makes our background-image go behind our text.

Now let us try decreasing the opacity of our background-image.



div::before{
      content: '';
      background-image: url(https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0.5;
    }

It works!

This was all about changing the background image opacity using before and after pseudo elements. For more such practical implementations checkout this article by Habdul Hazeez.

Reference Links

Frosted Glass Effect in CSS

Khushboo Chaturvedi — Mon, 08 Nov 2021 18:37:30 +0000

Frosted glass effect or better known as Glassmorphism has been a trending UI feature for quite sometime now. Mac OS is famous for its frosted glass effect and Windows 10 have also got frosted glass effect implemented along with websites like Github.

Today we will be seeing two ways to get a frosted glass effect using pure CSS.

Image Source: Anton Olashyn's design on Dribbble

Method One

Let's start by creating a div with class wrapper in our html code.



<div class="wrapper"></div>

Now we'll remove the margin and padding for all the elements and give our html and body a height of 100vh so that they cover the entire screen.



   * {
        margin: 0;
        padding: 0;
      }
body,html {
            height: 100vh;
          }

Now let's add a background image.



body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
     }

We can see image tiling here. To remove this we will use background-size: cover, also we don't want our image to repeat so we will use background-repeat: no-repeat;.



body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
        background-size: cover;
        background-repeat: no-repeat;
      }

Now let's style our wrapper div. We will give it some height and width and also set its background to inherit¹ . To make it look better we will give it a border and border radius. We will also give it a position property so that when we create our overlay it doesn't cover the entire screen but fit inside our wrapper instead. In this case I am setting it to position: absolute.



.wrapper {
            height: 320px;
            width: 600px;
            background: inherit;
            border-radius: 15px;
            border: 1px solid rgba(43, 43, 43, 0.568);
            position: absolute;
    }

But the div background doesn't look so nice. Instead of the full background appearing inside our div, I want it to only take the part of image that's behind the div. For that we will give the background-attachment: fixed property to our body.



 body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
      }

Much better. Now comes the main part, we will now create an overlay using before pseudo-class to give our div the frosted glass effect.

NOTE:

For before pseudo-class to work we need to give it a content property. In our case since we don't want any content we will leave it to be empty(content: '').
It also requires a display property for it to have size and shape. To make things simple we will be giving it a position: absolute, so that it will fit inside its parent container(wrapper div).



.wrapper:before {
        position: absolute;
        content: '';
        background: inherit;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.192);
        filter: blur(10px);
        border-radius: 15px;
      }

We are using box-shadow property to apply a grayish overlay and blur to blur that overlay. Also we are giving it a border radius similar to its parent for symmetry.

We can still see some unblurred edges though. To fix that we will first make the size of our overlay slightly bigger than the size of our wrapper and then set its left: -25px and top: -25px



.wrapper:before {
        position: absolute;
        content: '';
        background: inherit;
        height: 370px;
        width: 650px;
        left: -25px;
        right: 0;
        top: -25px;
        bottom: 0;
        box-shadow: inset 0 0 0 3000px rgba(150, 150, 150, 0.192);
        filter: blur(10px);
        border-radius: 15px;
      }

Lastly to make the edges clear and visible we need to set our wrapper div's overflow: hidden so that the part of overlay going outside our wrapper gets hidden.



 .wrapper {
        height: 320px;
        width: 600px;
        background: inherit;
        border-radius: 15px;
        border: 1px solid rgba(43, 43, 43, 0.568);
        position: absolute;
        overflow: hidden;
      }

For the final step, we will be using flexbox to center our div in our body.



body {
        background-image: url("Frosted Glass effect in CSS/assets/background.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
      }

Our frosted glass effect card is now ready. But there is one last problem we need to look at. If we try to write something inside our div wrapper, it goes behind the pseudo element and cannot be seen on top. To fix this issue we will have to create another div inside our frosted glass div, inside which we will put our content. Then we have to set the position of this content div to absolute.



    <div class="wrapper">
      <div class=content>
        <h1>Frosted Glass Effect</h1>
      </div>
    </div>



.content{
        position: absolute;
      }

Voila~

Our Frosted glass effect card is ready!

Method Two

The second method requires a lot lesser CSS but doesn't have a good browser support.

Image Source: Caniuse Website

For this we will create a wrapper div and apply a semi-transparent background color to it and then give it a backdrop-filter: property.



    <div class="wrapper">
        <h1>Frosted Glass Effect</h1>
    </div>



.wrapper{
        background: rgba(255, 255, 255, 0.192);
        backdrop-filter: blur(10px);
        height: 250px;
        width: 600px;
        border-radius: 15px;
        border: 1px solid rgba(43, 43, 43, 0.568);
      }

Tips for using Glassmorphism

First thing to keep in mind while using glassmorphism is to not overuse it or it may cause accessibility issues due to its blur and transparency. The effect looks best when used on only one or two elements!
To make the effect aesthetically pleasing make sure to use vivid and gradient colors as background. Avoid using monochrome backgrounds.
You can try experimenting with geometric elements. They will add a playful and attractive look to your page.

Glassmorphism can make a website or an app look more attractive, when used in the right way. It can improve UI accessibility so much, that the navigation gets easier even for people with visual problems. Take the best out of glassmorphism by playing around with it and having fun!

Reference Links

Which will make it inherit the background of its parent(body) ↩

Introduction to Bootstrap Grids

Khushboo Chaturvedi — Thu, 04 Nov 2021 19:06:53 +0000

What is a Grid-System?

A Grid-system is a very popular and easy way of placing content onto a page in rows and columns, ensuring that they are device responsive as well. It is a great tool to make the information on your website look more organized and approachable.

Image Source: Stephany's CSS Grids Blog on dev.to

Bootstrap Grids

Bootstrap has a 12 column grid system which means that in a given row we can set the width of an element to anything from one to twelve columns in width.

For example in the below picture all three blocks are of same size and thus have a width of four columns each.

Whereas in this picture the blocks take the size of four, two and three columns respectively.

To implement this grid-system we are provided with six break-points which makes these grids fully-responsive as well. To put it simply, suppose that you want a particular element to take the width of 6 columns in desktop screen but it should take a width of 12 columns in mobile screen then these break-points will help you in doing so.

Images source: Netflix India's Website

Using Bootstrap Grids

The first thing to know is that when we are making a bootstrap grid it always goes inside a container. Let's start by doing just that.

    <div class="container"></div>

Basic Grid

Now to create columns inside this container we first have to create a div with the class row and then add divs with class col inside it.

    <div class="container">
          <div class="row">
            <div class="col"> 1 </div>
          </div>
    </div>

In this case we have added only one column and therefore it occupies the entire row.

If we add one more column...

      <div class="container">
        <div class="row">
          <div class="col"> 1 </div>
          <div class="col"> 2 </div>
        </div>
      </div>

Then both the columns will occupy 50% width of the entire row.

If we add two more columns then each column will occupy 25% width of the entire row.

Column Widths

But what if in the above example we want the first column to occupy half of the screen? We do it by using col-6 class, which basically specifies that the first block will take a width of 6 columns.

<div class="container">
  <div class="row">
    <div class="col-6"> 1 </div>
    <div class="col"> 2 </div>
    <div class="col"> 3 </div>
    <div class="col"> 4 </div>
  </div>
</div>

Now the first column occupies half of the row and the rest three columns are equally sized in the remaining half of the row.

Similarly, if we wanted 2nd, 3rd and 4th block to occupy a width of 3, 2 and 1 column respectively, we will do it by using col-3, col-2 and col-1 classes respectively.

<div class="container">
  <div class="row">
    <div class="col-6"> 1 </div>
    <div class="col-3"> 2 </div>
    <div class="col-2"> 3 </div>
    <div class="col-1"> 4 </div>
  </div>
</div>

Responsive Column Widths

Notice that the column sizes remain same even in mobile display.

This looks quite stuffed though. What if I wanted these columns to have different widths for different device sizes? This is when the responsive behavior of bootstrap grids come into play.

Bootstrap provides us with six break-points namely xs, sm, md, l, xl and xxl, we can control container and column sizing by these breakpoint.

Image Source: Bootstrap Grids Documentation

Example:

Let's take two columns. I want these columns to occupy half of the screen width each in desktop and tablet devices but in mobile devices I want them to occupy the entire width of the screen.

For this we will use the col-md-6 class. This basically means that we should have a six units column on any size from medium size(tablet size) upwards. So that means on tablet, laptop and large-desktop they will take six units, but on anything smaller than the medium size, namely mobile, they will cover the entire width of the screen.

<div class="container">
  <div class="row">
    <div class="col-md-6"> 1 </div>
    <div class="col-md-6"> 2 </div>
  </div>
</div>

Reference Links

Center Items using flex-box

Khushboo Chaturvedi — Fri, 29 Oct 2021 08:50:35 +0000

CSS Flexbox has been out there for some time and given that you know about all its features, it could be a boon and save you a lot of time trying to align elements and making them responsive.

Today we will see how to center elements using flexbox in just 3 lines of code!!

First lets take a container and add a box inside it.

<div class="container">
    <div class="box"></div>
</div>

.box{
    height: 50px;
    width: 50px;
    background-color: red;
 }

.container{
    border: 2px solid black
    height: 200px;
}

In order to center the inner div we need to make the parent div a flex container.

To do so, we will use display: flex property for the parent container. This will make all the elements inside the container flex-items.

.container{
    border: 2px solid black
    height: 200px;
    display: flex;
}

Centering horizontally

To center our item horizontally we use the justify-content: center;, this will center our block along the main-axis. The direction of main-axis can be changed using the flex-direction property.

.container{
    border: 2px solid black
    height: 200px;
    display: flex;
    justify-content: center;
}

Centering Vertically

To center our item vertically we use the align-items: center;, this will center our block along the cross-axis.

.container{
    border: 2px solid black
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

The nice aspect of flexbox is the styles apply to all the children of our flex container. If we add two more elements, they all stay centered within the parent container.

 <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

flex-direction property

By default the flex-direction is set as row. If we change the flex-direction to column that would interchange the main-axis and the cross-axis. It will also make our items stack in a column instead of a row like before.

Hence, in this case our justify-content property will center the boxes vertically and align-items property will center the boxes horizontally.

.container {
        border: 2px solid black;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

.container {
        border: 2px solid black;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }