How to use margin auto In CSS
By applying the ml-auto
utility class, the left margin of a flex item is set to auto, causing it to be pushed to the rightmost side within the flex container.
Approach
- Start by applying the
flex
class on the container to activate flexbox layout. - Then, add the
ml-auto
class to the first flex item, which automatically sets its left margin to push it to the right. - This adjustment effectively allocates remaining space to the first item, causing other items to shift to the right within the container.
- As a result, all flex items are aligned to the right within the flex container.
Example: The below code shows the example using the margin-left:auto.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Moving Flex Item to right</ 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" > < h1 class = "text-green-700 text-center text-3xl text-bolder" > w3wiki </ h1 > < div class = "flex bg-pink-300 p-5 w-84 h-96" > < div class = "ml-auto bg-blue-300 p-4" >Flex Item 1</ div > < div class = "bg-green-300 ml-5 p-4" >Flex Item 2</ 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