Flexbox - align icon at the end of row (justify-self)

Question

I want to display an icon at the end of each row. I am trying to solve this using flexbox but I don't understand how justify-self works.

ul {
  list-style-type: none;
}

div {
  display:flex;
}

div:first-child {
  justify-self: flex-start;
}

div:last-child {
  justify-self: flex-end;
}

<section>
  <ul>
    <li>
      <div>
        <p>I want an icon at the end</p>
        <i>ICON</i>
      </div>
    </li>
    <li>
      <div>
        <p>but I dont know how</p>
        <i>ICON</i>
      </div>
    </li>
  </ul>
</section>

`justify-self` is not yet implemented in browsers https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self — Zvezdas1989, Dec 12 '17 at 13:29

VXp · Accepted Answer · 2018-12-16T09:39:34.700

The justify-self property is used only with the Grid, but not Flexbox, which uses the align-self property for vertical alignment.

What you need is justify-content: space-between on the flex-container, which separates flex-items or children and puts them apart as far as it can on the main or horizontal axis.

ul {
  list-style-type: none;
}

div {
  display: flex;
  justify-content: space-between;
}

<section>
  <ul>
    <li>
      <div>
        <p>I want an icon at the end</p>
        <i>ICON</i>
      </div>
    </li>
    <li>
      <div>
        <p>but I dont know how</p>
        <i>ICON</i>
      </div>
    </li>
  </ul>
</section>

Facundo La Rocca · Answer 2 · 2017-12-12T14:28:33.747

-1

I've added also icon aligment.

ul {
  list-style-type: none;
}

div {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

<section>
  <ul>
    <li>
      <div>
        <p>I want an icon at the end</p>
        <i>ICON</i>
      </div>
    </li>
    <li>
      <div>
        <p>but I dont know how</p>
        <i>ICON</i>
      </div>
    </li>
  </ul>
</section>

But I would use columns instead since this way could become tricky in a more complicated responsive scenario. I would like to have two columns, one for texts and another one for icons. Having elements into containers gets more control and reusability.

ul {
  list-style-type: none;
}

div {
  display:flex;
  flex-direction: row;
  align-items: center;
}

.column-text  {
  flex: 4;
}

.column-icon  {
  flex: 1;
}

<section>
  <ul>
    <li>
      <div>
        <div class='column-text'>
          <p>Some text</p>
        </div>
        <div class='column-icon'>
          <i>ICON</i>
        </div>
      </div>
    </li>
    <li>
      <div>
        <div class='column-text'>
          <p>Some other text</p>
        </div>
        <div class='column-icon'>
          <i>ICON</i>
        </div>
      </div>
    </li>
  </ul>
</section>

edited Dec 12 '17 at 14:28

answered Dec 12 '17 at 13:31

Facundo La Rocca

3,786
2
25
47

`this ways is not going to be responsiv` : why is not gonna be responsive ? and why the second solution will be ? i see no difference with both .. and the first one is responsibe – Temani Afif Dec 12 '17 at 13:49
Well, Columns are wrapped into a container so they are limited to its container. Should I have said "It is not going to be a good example of responsiveness"? This is a very simple example, but in a more complex scenario not having control over what we are rendering could be a problem. – Facundo La Rocca Dec 12 '17 at 14:00
as you said it's very simple example here, so no need to complicate it :) Because as you said it can create confusion, but am sure he simply need text + icon which very simple without adding more complex code ;) – Temani Afif Dec 12 '17 at 14:04
That's why I provided a simple answer and then the way I would have chosen. – Facundo La Rocca Dec 12 '17 at 14:06

Flexbox - align icon at the end of row (justify-self)

2 Answers2