Making a flex item float right

html

responsive-design

flexbox

css-properties

byAlex Kataev·Jan 13, 2025

To float an item to the right in flex container, use margin-left: auto on the item. This uses the flexbox's distribution of space to shove the item against the right edge:

.item-to-float-right {
  margin-left: auto;
  /* Knocks the item to the right like a table tennis ball. 🏓 */
}

Apply the .item-to-float-right class to the item:

<div class="flex-container">
  <div class="flex-item item-to-float-right">Look, ma! Right-hugging item.</div>
</div>

Reshuffling items

If you wish to maintain the right alignment of an item, even while changing the order of other items in the flex container, we could use the order property:

.any-old-item {
  order: 1; /* Keeps the item fixed like a dutiful soldier in formation */
}

.item-to-float-right {
  margin-left: auto; /* Hustles the item to the right */
  order: 2; /* Ensures it stays extreme right, like it's socially awkward */
}

The order value can be any digit greater than the highest order existing in the flex container.

Going responsive

For responsive layouts, sometimes, the right floated item may need to wrap to the new line while keeping itself to the {extreme} right. Combine flex-wrap: wrap at the container level with width: 100% on the item, to retain predictability:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* Lets the items wrap, like kinder surprise toys! 🎉 */
}

.item-to-float-right {
  margin-left: auto;
  width: 100%; /* The item grabs the entire width, like a greedy cookie monster 🍪 */
}

Other routes to Rome

Spread 'em out

Set justify-content: space-between for equal spacing between items:

.flex-container {
  display: flex;
  justify-content: space-between; /* Spreads the items like evenly buttered toast 🍞 */
}

The push to right

Align all items to the right with justify-content: flex-end:

.flex-container {
  display: flex;
  justify-content: flex-end; /* All the items huddle on the right, it's that corner spot in a chilly room next to the radiator! 🔥 */
}

Things to avoid

The float property doesn't affect flex items. Attempting float: right; on a flex item inside a flex container won't have the desired effect.
Using position properties on flex items could create conflicts with how flexbox operates. The layout implications of the position property may override the intended effects of using flexbox.
Using margin on the left-side items to shove the last item to the right could backfire if the content of the left-side items changes unpredictably.