Position flex children next to each other with align-self

Question

I am trying to make a simple nav with next and previous buttons. Previous is at the far left of the container, and next at the far right. I know what you're thinking: this is the ideal time to use justify-content: space-between. However, when a user is on the first page or the last page, the backend doesn't output the previous and next buttons respectively. This causes the next button to be aligned left on the first page, and that's not what I want.

I thought I could use align-self on the children. The problem I encounter now is that the first child pushes the second one down and I don't know how to fix this.

Here's a snippet

.container {
  display: flex;
}
.container * {
  width: 10%;
  height: 80px;
}
#d1 {
  background: green;
  align-self: flex-start;
}
#d2 {
  background: red;
  align-self: flex-end;
}

<div class="container">
  <div id="d1">
    div 1
  </div>
  <div id="d2">
    div 2
  </div>
</div>

`align-self` works on the *cross axis*. In `flex-direction: row`, that would be the vertical dimension. You're working on the *main axis*. You would need something like `justify-self`, which doesn't exist. However, flex `auto` margins can do the job. http://stackoverflow.com/q/32551291/3597276 — Michael Benjamin, Apr 15 '16 at 11:53

score 1 · Accepted Answer · answered Apr 15 '16 at 08:58

1

I completely forgot about magic margins in flex. Here goes:

.container {
  display: flex;
}
.container * {
  width: 10%;
  height: 80px;
}
#d1 {
  margin-right: auto;
  background: red;
}
#d2 {
  margin-left: auto;
  background: green;
}

<div class="container">
  <div id="d1">
    div 1
  </div>
  <div id="d2">
    div 2
  </div>
</div>

answered Apr 15 '16 at 08:58

Bram Vanroy

27,032
24
137
239

Also, either `margin-right: auto` on D1 *or* `margin-left: auto` on D2 are enough. You don't need both. Each one spaces them both apart as much as possible. – Michael Benjamin Apr 15 '16 at 11:56
1

@Michael_B True, but I do need both in case only one button is shown - that's why I cannot use `justify-content: spave-between`. – Bram Vanroy Apr 15 '16 at 11:58

Position flex children next to each other with align-self

1 Answers1