0

According to the spec, and several blogs, the 'align-self' overrides the 'align-items' property of its parent. In the CodePen example, I have used flex-direction: column because align-self only applies to the cross axis. I haven't been able to get rid of the extra white space. I know I could just make each li a container, and align items within them, but I'm really trying to solve with without creating more containers, if possible.

The last item aligns to the end nicely, but everything in between the first and last act almost like 'space-around' but I realize it's really a column that forces each item to wrap. If I remove any alignment properties, the combo of column and flex-wrap causes the items to "distribute". It could be this is a limitation of the flexbox spec... but I'm not sure.

   * { box-sizing: border-box; }

    ul {
      list-style-type: none;
      padding: 0;
      display: flex;
      align-items: flex-start;
      border: 1px solid black;
      li {
        display: flex;
        justify-content: center;
        width: 100px;
        border-right: 1px solid black;
        &:last-of-type {
          align-self: flex-end;
        }
      }
    }
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
Mahatmasamatman
  • 1,537
  • 2
  • 6
  • 20
sinrise
  • 391
  • 3
  • 21
  • What white space are we talking about? – Asons May 18 '17 at 21:25
  • In the example, you should see the first li aligned left, and the last aligned right. But the one in the middle should also be aligned left... well, that's what I'm trying to do. – sinrise May 18 '17 at 21:36
  • 2
    Like this? ... https://codepen.io/anon/pen/NjOdyP?editors=1100 – Asons May 18 '17 at 21:39
  • You're a damn genius. – sinrise May 18 '17 at 21:45
  • 1
    Switching to `flex-direction: column` to make this layout work is unnecessary. You can achieve the layout in row-direction with `auto` margins, as @LGSon has shown. Here's an [**explanation of how flex `auto`margins work**](http://stackoverflow.com/q/32551291/3597276). – Michael Benjamin May 18 '17 at 21:56
  • 1
    But the reason you were having trouble in column-direction has nothing to do with `align-self` or `align-items`. Since you're working in a multi-line flex container (i.e., `flex-wrap: wrap` is applied), the property to control cross-axis alignment is `align-content`. Here's an [**explanation**](http://stackoverflow.com/q/42613359/3597276). – Michael Benjamin May 18 '17 at 21:58
  • 1
    Thanks so much for all the great answers! Just when you think you know flexbox... :D – sinrise May 18 '17 at 22:02
  • @Michael_B How would you do to actually right align the last child in OP's original Codepen, where column direction is used? – Asons May 18 '17 at 22:02
  • 1
    Flex can't do that, @LGSon. There are no keyword alignment properties for such alignment in the cross axis. And `auto` margins will work within their column, not across the container. You would have to use absolute positioning. – Michael Benjamin May 18 '17 at 22:13

0 Answers0