如何在内联容器内创建一行等宽的元素?可能使用FlexBox

2022-02-22 00:00:00 css flexbox

我正在尝试创建具有以下功能的一行元素:

  1. 在内联挡路容器内(该容器旁边需要有内容)
  2. 都是相同的宽度
  3. 自动调整大小,使其宽度足以容纳最宽的元素而不会溢出
  4. 自动调整大小以使仅包含最宽的元素而不会溢出

我目前的努力是使用FlexBox,但还不能满足所有这些条件。我的最新尝试(到目前为止在Chrome中测试)低于条件3,但不满足条件3。

我是不是遗漏了什么?或者是否有其他可行的方法?

live example

div {
  display: inline-block;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  flex: 1;
}

a {
  display: block;
  padding: 1em;
  border: solid black 1px;
}
<div>
  <ul>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">barrrrrrrrr</a>
    </li>
    <li>
      <A href="/">foooooooooooo</a>
    </li>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">hello&nbsp;world</a>
    </li>
  </ul>
</div>

(对于此测试,我没有使用浏览器兼容性供应商前缀的版本,因此您可能必须选择具有良好FlexBox支持的浏览器)。


解决方案

我能够做到这一点,方法是对父元素使用display: inline-grid,然后将属性grid-template-columns: 1fr 1fr 1fr也添加到父元素(所需的每列1fr)。

div.inline {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
}

div.cell {
    border: 1px dotted grey;
    text-align: center;
}
content
<div class='inline'>
    <div class='cell'>lorem ipsum lorem ipsum</div>
    <div class='cell'>lorem</div>
</div>
content

相关文章