Question

我想在每行的末尾显示一个图标。我试图用flexbox解决这个问题，但我不明白自我是如何运作的。

＆＃13;

ul {
  list-style-type: none;
}

div {
  display:flex;
}

div:first-child {
  justify-self: flex-start;
}

div:last-child {
  justify-self: flex-end;
}

＆＃13;

<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>

＆＃13;

Answer 1

justify-self 属性仅用于网格，而不用于 Flexbox ，它使用align-self 垂直对齐的属性。

你需要的是{em> flex-container 上的justify-content: space-between，它将 flex-items 或孩子分开并将它们分开尽可能在主或水平轴上。

＆＃13;

ul {
  list-style-type: none;
}

div {
  display: flex;
  justify-content: space-between;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以考虑margin-left:auto将图标向右推，如下所示：

＆＃13;

ul {
  list-style-type: none;
}

div {
  display:flex;
}

div i {
  margin-left:auto;
}

＆＃13;

<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>

＆＃13;

Answer 3

我还添加了图标对齐。

＆＃13;

ul {
  list-style-type: none;
}

div {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

＆＃13;

<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>

＆＃13;

但我会使用列，因为这种方式在更复杂的响应方案中会变得棘手。我想有两个列，一个用于文本，另一个用于图标。将元素放入容器可以获得更多的控制和可重用性。

＆＃13;

ul {
  list-style-type: none;
}

div {
  display:flex;
  flex-direction: row;
  align-items: center;
}

.column-text  {
  flex: 4;
}

.column-icon  {
  flex: 1;
}

＆＃13;

<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>

＆＃13;

Flexbox - 在行尾对齐图标（自我辩护）

3 个答案: