How to Align One Item to the Right using CSS Flexbox ? Last Updated : 11 Jan, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report Methods to Align a Single Item to the Right using CSS Flexbox:1. Using margin-left: autoApplying margin-left: auto to the specific flex item pushes it to the right, utilizing the available space. HTML <html> <head> <style> .flex-container { display: flex; background-color: #f0f0f0; padding: 10px; } .flex-item { padding: 10px; background-color: #4CAF50; color: white; margin-right: 10px; } .flex-item-right { margin-left: auto; margin-right: 0; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item flex-item-right">Item 3</div> </div> </body> </html> In this Example:The .flex-container is defined as a flex container with display: flex.The .flex-item-right class applies margin-left: auto, pushing "Item 3" to the right.2. Using justify-content: space-betweenSetting justify-content: space-between on the flex container distributes space between flex items, placing the first item at the start and the last item at the end. HTML <html> <head> <style> .flex-container { display: flex; justify-content: space-between; background-color: #f0f0f0; padding: 10px; } .flex-item { padding: 10px; background-color: #4CAF50; color: white; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div> </body> </html> The .flex-container uses justify-content: space-between to distribute items evenly, aligning the first item to the left and the last item to the right.3. Using justify-content: flex-end with margin-left: autoWhile justify-content: flex-end aligns all items to the right, combining it with margin-left: auto on a specific item can push that item further to the right, effectively separating it from the others. HTML <html> <head> <style> .flex-container { display: flex; justify-content: flex-end; background-color: #f0f0f0; padding: 10px; } .flex-item { padding: 10px; background-color: #4CAF50; color: white; margin-right: 10px; } .flex-item-right { margin-left: auto; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item flex-item-right">Item 3</div> </div> </body> </html> The .flex-container uses justify-content: flex-end to align all items to the right.The .flex-item-right class applies margin-left: auto, pushing "Item 3" further to the right, creating separation from the other items. Comment More infoAdvertise with us Next Article How to flex-start items at the beginning of the container using CSS ? J jaykush Follow Improve Article Tags : Web Technologies CSS Geeks Premier League CSS-Questions Geeks Premier League 2023 +1 More Similar Reads How to Align Items to End Position using CSS ? To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertica 2 min read How to align item to the flex-end in the container using CSS ? Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items 3 min read How to Arrange Two Items Per Row Using Flexbox? Flexbox in CSS is a powerful layout module that allows you to easily design complex layouts. It provides an efficient way to distribute space among items in a container, even when their sizes are unknown or dynamic.Below are the approaches to Arrange Two Items Per Row Using Flexbox:Table of ContentU 2 min read How to vertically align text inside a flexbox using CSS? Vertically aligning text inside a flexbox involves positioning the text centrally within the vertical space of a flex container. This can be achieved using CSS properties such as align-items and justify-content to control the vertical alignment and centering of the text. Here we have some common app 2 min read How to flex-start items at the beginning of the container using CSS ? The flex-start value of the justify-content property allows you to place the items at the start of the container. The flex-start indicates the flex-direction while the start indicates the writing-mode direction. The children of the parent container are allowed to align at the start of the parent con 1 min read How to Align Right in a Table Cell using CSS ? Aligning right in a table cell means positioning the content of the cell to the right side. In CSS, this can be achieved by applying the text-align property to the table cell or using the td selector.Align right in a table cell Using text-align propertyTo align the contents of a table cell to right, 2 min read Like