是否可以将flexbox基于列的列表中的第一项设置为100％而其他项不是？

Question

我想不是，但想知道其他人是否有解决方案。

以下是我现在使用基于列的flexbox布局得到的内容：

但我真的想要的是：

我的标记是一个简单的UL和LI。我在ul和基于列的布局选项上设置了flexbox，并且我指定了高度，使其包裹在右侧。我在各个LI的列上使用Bootstrap 4 flexbox布局。可以想象，如果我指定第一个项目为100％宽度，那么所有符合指定高度的直接项目也将是100％。

思考？提前谢谢！

Answer 1

＆＃13;

＆＃13;

.wrapper, html, body {
    height:100%;
    margin:0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    padding: 10px;
}
#row2 {
    padding: 10px;
}
#row3 {
    flex:2;
    display: flex;
}
#col1 {
    flex :0 0 240px;
    padding: 10px;
}
#col2 {
    padding: 10px;
    flex: 1 1;
}
#col3 {
    padding: 10px;
    flex: 0 0 240px;
}

ul.menu {
  list-style: none;
}

＆＃13;

<div class="wrapper">
    <div id="row1">Menu</div>
    <div id="row2">
      <h1>Care & Service Center</h1>
    </div>
    <div id="row3">
      <div id="col1">
        <ul class="menu">
          <li>Col1 - Row 1</li>
          <li>Col1 - Row 2</li>
          <li>Col1 - Row 3</li>
          <li>Col1 - Row 4</li>
        </ul>
      </div>
      <div id="col2">
        <ul class="menu">
          <li>Col2 - Row 1</li>
          <li>Col2 - Row 2</li>
          <li>Col2 - Row 3</li>
          <li>Col2 - Row 4</li>
        </ul>
      </div>
      <div id="col3">
        <ul class="menu">
          <li>Col3 - Row 1</li>
          <li>Col3 - Row 2</li>
          <li>Col3 - Row 3</li>
          <li>Col3 - Row 4</li>
        </ul>
      </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您在ul上设置了填充并提供了第一项position: absolute，那么您会得到这个，这会是一个选项吗？

ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  list-style-type: none;
  height: 100px;
  padding: 20px 0 0 0;
}
ul li {
  border: 1px solid black
}
ul li:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
}

<ul>

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

  <li>6
  </li>
  <li>7
  </li>
  <li>8
  </li>
  <li>9
  </li>
  <li>10
  </li>

  <li>11
  </li>
  <li>12
  </li>
  <li>13
  </li>
  <li>14
  </li>
  <li>15
  </li>

</ul>