<li>可以用作弹性箱容器吗？

Question

<ul>可作为<li>的良好Flexbox容器。

但是，当我尝试将<li>用作<i>或<span>等其他内联项的容器时，它不起作用。

我做错了什么（例如下面的例子）或者<li>没有做出好的弹性箱容器吗？

请参阅此示例笔实际操作：http://codepen.io/bobtabor/pen/PWyZBQ

这是我渴望的结果：

但这是我的实际结果：

在这个例子中，我想要将每个<li>右侧的字体 - 真棒铅笔图标对齐。我希望定义一个具有align-self: flex-end属性的类，如下所示：

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

......要照顾好这个。但是，当我在Chrome上运行此操作或在Windows上运行Edge时，.fa-pencil会向左（开头）对齐。

我有简单的HTML标记：

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

这是相关的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;
}

我已经确认<li>的孩子实际上正在响应Flexbox，因为我可以这样设置.fa-bars的顺序：

.fa-bars {
  order: 2;
}

...并看到栏图标做出相应的反应。

Answer 1

试试这个：

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

您的灵活容器（li）有flex-direction: row。这意味着主轴是水平的，横轴是垂直的。

align-self属性仅适用于横轴。因此align-self上的.fa-pencil会向上/向下移动项目，而不是向左/向右移动。

由于主轴没有justify-self，因此您可以使用auto边距将铅笔图标分隔到右边缘。

revised codepen

此处有更多详情：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

您可以使用justify-content: space-between;做得更好。

codepen

上的修改代码