Html 我如何在flexbox中的自己行上显示我的按钮

我试图在自己的行上显示

，同时在一行上显示

和所有按钮。我正在使用flex，我知道如何正常地做到这一点，我尝试做的是

display:block在按钮和h3上，让它们在自己的线路上，这不起作用，我试着用谷歌搜索我的方式，并找到某种flexbox指南来自己解决它


正文{
利润率：0%；
背景色：#6987D5；
字体系列：Arial、Helvetica、无衬线字体；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.container h1{}
.容器按钮{
边界：0px；
背景色：#315dcc；
填充：1%；
颜色：白色；
}

秒表
00:00
开始
停止
重置
理论上，您可以添加：

flex-direction: column;

到
.container
css
但它也会在列中创建开始和停止按钮，这是您想要的吗？
如果您想要树按钮排成一行，它们需要自己的flex容器。要在列中显示项目，不需要flex，因为这是默认行为

HTML


.container{
显示器：flex；
}

秒表
00:00
开始
停止
重置
您可以像这样在单独的容器div中包装按钮和文本

<div class="container">
    <h1>Stopwatch</h1>
    <h3>00:00</h3>
</div>
<div class="container">
    <button type="button">Start</button>
    <button type="button">Stop</button>
    <button type="button">Reset</button>
</div>


秒表
00:00
开始
停止
重置
您必须在按钮周围添加一个
，以将它们组合起来


正文{
利润率：0%；
背景色：#6987D5；
字体系列：Arial、Helvetica、无衬线字体；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.container h1{}
.按钮{
显示器：flex；
}
.容器按钮{
边界：0px；
背景色：#315dcc；
填充：1%；
颜色：白色；
}

秒表
00:00
开始
停止
重置
您的.container是弯曲的，这就是为什么所有内容都从左向右流动的原因。可以设置
伸缩方向：列
所有
h
元素都是阻塞元素，这意味着它们将填满任何可用空间。因此，删除
显示：flex.container
类选择器中选择code>，并将按钮包装在网格或flex容器中

.button-group {
  display:grid;
  grid-template-colums: repeat(3, 1frm);
  gap:1rem;
 }

或

及


开始
停止
终止
您是否正在寻找
弹性方向：列？查看我的答案，也许它会帮助你：）已经尝试过了，我希望按钮是内联的，而在我显示内联和显示内联flex之后，它们甚至不是内联的。
.button-group button{
  gap: 1rem; //May not work on all browsers
  display:flex;
  flex-wrap:wrap;
}

<div class='button-group'>
  <button>Start</button>
  <button>Stop</button>
  <button>End</button>
</div>