如何从这些水平堆叠的柔性物品转到垂直堆叠的柔性物品？

Question

以下代码水平展示项目：

＆＃13;

＆＃13;

.col-12 {
  display: flex
}

input {
  flex: 0 0 80%
}

label {
  flex: 0 0 20%
}

＆＃13;

<div class="col-12">
  <label>Label</label>
  <input type="text" value=""></input>
</div>

＆＃13;

＆＃13;

＆＃13;

我应该更改什么，以便Message位于输入字段的顶部？ （并且输入字段填满整个容器？）

Answer 1

HTML

<div class="col-12">
  <label>Label</label>
  <br>
  <input type="text" value=""></input>
</div>

CSS

.col-12 {
  display: flex
  flex-direction: column
}