已解决 - 垂直拉伸以填充 space 内部弯曲方向：列

Question

我有一个项目列表

<ul>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
</ul>

并且 ul 元素的样式符合我的喜好

但是，无论我在 li 元素上尝试什么，li 项目都无法拉伸以适应

我尝试对其应用拉伸，我什至尝试将 li 元素的高度设置为 calc(85vh / 6)，因为里面有 6 个元素

li 元素恰好是（容器大小 / 6 ）这一点很重要，因为这是导航的一部分，并且 li 元素包含需要在树中向下排列的绝对元素

ul{
    display:flex;
    flex-direction: column;
    position:absolute;
    margin-top:15vh;
    height:85vh;
    background-color:#FFF;
    padding:5vmin;
    width:50%;
  }
ul > li{
    align-self: stretch;
  }

哦，这个需要CSS-only

注意下面的粉红色区域，检查时应该都是白色的（没有space）

有谁知道我错在哪里？

编辑：@nemus，感谢您的出色回答 - 我可以在您的代码笔中看到它有效，但由于某种原因它不适用于我的项目，我无法解决

编辑：好的，所以我犯了一个傻瓜！ ul 根据移动设备或桌面设备从网格更改为 flex，但它仍然有网格间隙属性！如果有人看到这个并且有同样的问题，请检查你没有网格间隙！

Answer 1

您需要将 justify-content 应用到 ul

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 85vh;
  background-color: #FFF;
  padding: 5vmin;
  width: 50%;
  list-style: none;
  border: 1px solid red;
  justify-content: space-between;
}

ul>li {
  border: 1px solid green;
  flex: 1;
  margin-bottom: 1em;
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

Answer 2

您好，我假设您想在 <ul> 内创建 6 个偶 <li> 元素。如果您为 <ul> 定义了高度，则可以在 <li>

上使用 height: calc(100% / 6)

示例：https://codepen.io/nemuss/pen/abLrMqO

Answer 3

ul{
    display:flex;
    list-style-type: none;
    justify-content: space-between;
    flex-direction: column;
    margin-top:15vh;
    height: 35em;
    background-color:#FFF;
    padding:5vmin;
    width:50%;
    border: solid;
  }
ul > li{
      text-align: center;
    padding: 20px;
    background-color: red;
    border: solid;
  }

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

已解决 - 垂直拉伸以填充 space 内部弯曲方向：列

Solved - Stretch vertically to fill space inside flex direction: column

css

flexbox