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
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, applyingflex-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
- Using justify-end
- Using margin auto