CODEWITHSUNDEEP
cssflexbox
Rory
Rory

Reputation: 1492

Flex box horizontal position

I have N number of divs up to N = 5, and I have another div named X

I want to align horizontally in a flex div container the N divs next to each other. But the X div must always be pushed to the right hand side of the flex container no matter how many N divs there are.

For example

N   N               X
N   N   N           X

I can do this with float left and some sizing but I'm getting lost with Flex. I can get the X div to position next to the last N div but not to the right hand side, as if always fixed to that position.

Upvotes: 1

Views: 1399

Answers (1)

Gerard
Gerard

Reputation: 15786

margin-left: auto applied to x

.container {
  display: flex;
  justify-content: flex-start;
}

.n,
.x {
  width: 15%;
}

.x {
  margin-left: auto;
}
<div class="container">
  <div class="n">N</div>
  <div class="n">N</div>
  <div class="n">N</div>
  <div class="x">X</div>
</div>

Upvotes: 4

Related Questions