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.
Approach
- Apply the
flexclass to the container element to enable Flexbox. - Assign the
justify-endclass 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-growto control the sizing behaviour of flex items. For instance, applyingflex-growto 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-endclass 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
- Using justify-end
- Using margin auto
Contact Us