使flex子级内联块[重复]

Posted 2023-03-05

【中文标题】使flex子级内联块[重复]

【英文标题】：Make flex children inline-block [duplicate]

【发布时间】：2018-04-29 09:49:17

【问题描述】：

我想让 flex 子级呈现 inline-block，以便 border-bottom 在 li 的宽度而不是容器的宽度之下。

显然flex children不能设置为inline-block？

这个问题有解决办法吗？

.menu 
  display: flex;
  flex-flow: column;
  list-style: none;
  padding: 0;

.menu > li 
  display: inline-block;
  margin-bottom: 1rem;
  border-bottom: 3px solid black;

<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

https://codepen.io/joshuajazleung/pen/EbwZmJ

【问题讨论】：

如果你将它设置为 inline-block 那么它就不再是 flex 了。你的问题这样写毫无意义。

@Rob If 将 inline-block 设置为 flex 项 不会使其 “不再是 flex”，尽管它不会t 给出预期的结果。

【参考方案1】：

将align-items: flex-start添加到容器中：

.menu 
  display: flex;
  flex-flow: column;
  align-items: flex-start; /* NEW */
  list-style: none;
  padding: 0;

.menu > li 
  margin-bottom: 1rem;
  border-bottom: 3px solid black;

<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

或者...从display: flex 切换到display: inline-flex。

.menu 
  display: inline-flex;
  flex-flow: column;
  list-style: none;
  padding: 0;

.menu > li 
  margin-bottom: 1rem;
  border-bottom: 3px solid black;

<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

更多详情：Make flex items take content width, not width of parent container

【讨论】：

如何使用 flex 的精彩演示！不需要任何额外的标记。

很好地使用了 flex，我今天遇到了一个相同的问题，我必须内联一个 flex-child。在这种情况下，我使用了 align-self: flex-start 属性。