Question

在下面的代码片段中，我试图将“0 of 2 completed”显示在全行的新行上。我试图用弹性盒子这样做，但我开始认为它并不意味着以这种方式使用。实现这一目标的最佳方法是什么？

.container {
  display: flex;
  width: 400px;
  height: 40px;
  border: 1px solid blue;
}

.container > div {
  height: 20px;
}

.dragHandle {
  flex: 0 0 20px;
  background-color: rgba(0,0,0,0.2);
}

.checkbox {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.input {
  flex: 0 0 auto;
  flex-grow: 1;
  background-color: rgba(0,0,0,0.1);
}

.avatar {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.footer {
  /* appear on new line */
}

<div class="container">
  <div class="dragHandle"></div>
  <div class="checkbox"><input type="checkbox" /></div>
  <div class="input">Task title</div>
  <div class="avatar"></div>
  <div class="footer">0 of 2 completed</div>
</div>

Answer 1

只需将其设为width:100%并将flex-wrap:wrap添加到容器中：

.container {
  display: flex;
  width: 400px;
  height: 40px;
  border: 1px solid blue;
  flex-wrap:wrap;
}

.container > div {
  height: 20px;
}

.dragHandle {
  flex: 0 0 20px;
  background-color: rgba(0,0,0,0.2);
}

.checkbox {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.input {
  flex: 0 0 auto;
  flex-grow: 1;
  background-color: rgba(0,0,0,0.1);
}

.avatar {
  flex: 0 0 30px;
  background-color: rgba(0,0,0,0.3);
}

.footer {
  width:100%; /* Or flex: 0 1 100% Or flex-basis:100%*/
}

<div class="container">
  <div class="dragHandle"></div>
  <div class="checkbox"><input type="checkbox" ></div>
  <div class="input">Task title</div>
  <div class="avatar"></div>
  <div class="footer">0 of 2 completed</div>
</div>

Answer 2

我会在容器内添加一个新div，它将包括除页脚之外的所有其他div，然后将新div设置为display：flex，而不是容器。这对我有用。还可以考虑使用标签页脚而不是div类页脚：

＆＃13;

.container {
  width: 400px;
  height: 40px;
  border: 1px solid blue;
   }
#newDiv {
   display: flex;
   }

＆＃13;

<body>
  <div class="container">
    <div id="newDiv">
      <div class="dragHandle"></div>
      <div class="checkbox"><input type="checkbox" /></div>
      <div class="input">Task title</div>
      <div class="avatar"></div>
    </div>
    <footer>0 of 2 completed</footer>
   </div>
</body>

＆＃13;

无法使弹性行显示在新行全宽上

2 个答案: