1

<ul>serves as a good flexbox container for <li>.

However, when I try to use <li> as a container for other inline items like <i> or <span> it doesn't work.

Am I doing something wrong (example below) or does the <li> not make a good flexbox container?

See this example pen in action: http://codepen.io/bobtabor/pen/PWyZBQ

Here is my DESIRED result:

Desired Result

HOWEVER this is my ACTUAL result:

Actual result

In this example, I want the font-awesome pencil icon aligned to the right of each <li>. I would expect to define a class with the align-self: flex-end property like so:

.fa-pencil {
  align-self: flex-end;
}

... to take care of this. However, when I run this in Chrome or Edge on Windows, the .fa-pencil aligns to the left (the start).

I have simple HTML markup:

<section>
  <ul>
    <li>
      <i class="fa fa-bars"></i>
      <span>Item 1</span>
      <i class="fa fa-pencil"></i>
    </li>

    <li>
      <i class="fa fa-bars"></i>
      <span>Item 2</span>
      <i class="fa fa-pencil"></i>
    </li>

    <li>
      <i class="fa fa-bars"></i>
      <span>Item 3</span>
      <i class="fa fa-pencil"></i>
    </li>
  </ul>
</section>

And here's the relevant CSS:

ul, li {
  list-style-type: none;
  list-style-position:inside;
  margin:0;
  padding:0;   
}

ul {
  display: flex;
  flex-direction: column;
}

li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border: 1px solid black;
  margin-bottom: 10px;
  padding: 20px;
  font-size: 1.5em;
}

.fa-bars {
}

.fa-pencil {
  align-self: flex-end;
}

I've been able to confirm that <li>'s children are, in fact, responding to Flexbox because I can set the order of .fa-bars like so:

.fa-bars {
  order: 2;
}

... and see the bars icon respond accordingly.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Bob Tabor
  • 967
  • 1
  • 13
  • 23

2 Answers2

2

Try this:

.fa-pencil { margin-left: auto; }

Your flex container (li) has flex-direction: row. This means the main axis is horizontal and the cross axis is vertical.

The align-self property works only on the cross axis. So the align-self on .fa-pencil will move the item up/down, not left/right.

Since there is no justify-self for the main axis, you can use an auto margin to space the pencil icon to the right edge.

revised codepen

More details here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    Well, that definitely works! Thank you. Thanks for the explanation, the example and the link ... clearly, I did not correctly understand cross vs. horizontal axis. Kudos! – Bob Tabor Feb 09 '17 at 03:08
0

You can do it using justify-content: space-between; even better.

Modified code on codepen

Błażej
  • 1