How to use justify-end In CSS

Q: How to use justify-end In CSS

In this approach, the justify-end class is utilized to align flex items to the right within the flex container by positioning them at the end of the main axis.

Using margin auto

In this approach, the justify-end class is utilized to align flex items to the right within the flex container by positioning them at the end of the main axis.

Approach

Apply the flex class to the container element to enable Flexbox.
Assign the justify-end class to the flex container. This class aligns the flex items to the end of the main axis, pushing them to the right in a row direction.
Optionally, you can utilize utility classes such as flex-grow to control the sizing behaviour of flex items. For instance, applying flex-grow to the first flex item will make it take up the remaining space in the flex container.
Create flex items within the container, and they will naturally be positioned to the right due to the justify-end class applied to the container.

Example: The below code shows the example using the justify-end.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Flexbox with Tailwind CSS</title>
   
    <!-- Include the Tailwind CSS CDN -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-200 p-8 w-full h-60">
    <h1 class="text-green-700 text-center text-3xl text-bolder">
          w3wiki
      </h1>
    <div class="flex justify-end bg-pink-300 p-5 w-84 h-96">
        <div class="bg-green-300 p-4">Flex Item 1</div>
        <div class="bg-yellow-300 ml-5 p-4">Flex Item 3</div>
    </div>
</body>
 
</html>

Output:

How to move Flex Items to the Right in Tailwind CSS ?

Aligning flex items to the right within a flex container refers to positioning the child elements (flex items) towards the right-hand side of the container when using the flexbox layout in CSS. This alignment can be achieved through various techniques or Tailwind CSS utility classes.

Table of Content