CSS flex item's main-axis alignment

Question

I'm very new to CSS, and I'm struggling on positioning a flex item (DownloadButton) the way I want it too.

I want to position a flex item a certain way, but my googling skills are failing me.

The current state looks like this:

Icon DownloadButton DeleteButton

What I want is this:

Icon DownloadButton DeleteButton

I thought I could use align-items, but that's for the cross axis. Rather than even spacing, like the normal flex behavior, I want my DownloadButton hugging the DeleteButton at the end. However, my Googling skills have failed me. Help would be greatly appreciated, thanks guys!

[Methods for Aligning Flex Items along the Main Axis](http://stackoverflow.com/a/33856609/3597276) — Michael Benjamin, Dec 30 '15 at 21:51

Paulie_D · Answer 1 · 2015-12-31T10:22:20.497

3

I would align the items to the end (for preference) and then adjust the first one.

As pointed out in the comments the end alignment is not necessary as the effect is caused by the margin adjustment.

.parent {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
  justify-content: flex-end;
  padding: .5em;
}
button:first-child {
  margin-right: auto;
}

<div class="parent">
  <button>Icon</button>
  <button>Download</button>
  <button>Delete</button>
</div>

edited Dec 31 '15 at 10:22

answered Dec 30 '15 at 21:30

Paulie_D

107,962
13
142
161

2

The alignment is done by the auto margin. `justify-content: flex-end` does nothing. – Oriol Dec 30 '15 at 22:58

Zed Strong · Answer 2 · 2015-12-30T21:44:35.753

Add these styles to the container:

#flex-container { /*Select Your Flex Container*/
display: flex;
flex-direction: row;
justify-content: space-between;
}

Add these styles for the flexible items:

.flexible-items { /*Select The Children Of The Flex Container*/
flex-grow: 0; /*This Is Default*/
}
#Icon {
flex-grow: 1;
}

If you want some space between the other two flexible items, you can achieve this by multiple methods, 1 being to add some margin and padding styles for their sides.

CSS flex item's main-axis alignment

2 Answers2