Html 如何对齐div'；她身高不一样吗？

我试着将div对齐如下：

但结果是错误的：

HTML:

---

怎么做？有人能帮我吗？谢谢

如果您希望它以静态的方式运行，而不是在它们上面做任何映射循环，那么您可以这样实现它

。在{
宽度：70%；
保证金：自动；
填充顶部：40px；
填充底部：40px；
文本对齐：居中；
边框：1px纯绿色；
溢出：自动；
显示器：flex；
弯曲方向：行；
调整项目：灵活启动；
证明内容：中心；
位置：相对位置；
列数：5；
}
.盒子{
文本对齐：居中；
宽度：314px；
最小宽度：314px；
填充：10px；
利润率：10px；
显示：内联块；
盒影：0px 4px#1c1c；
边框右下半径：10px；
边框左下半径：10px；
背景色：#363636；
边框：1px纯红；
}
@媒体屏幕和屏幕（最大宽度：2450px）{
{
列数：4；
}
}
@媒体屏幕和屏幕（最大宽度：1900px）{
{
列数：3；
}
}
@媒体屏幕和屏幕（最大宽度：1350px）{
{
列数：2；
弯曲方向：立柱；
对齐项目：居中；
}
}
@媒体屏幕和屏幕（最大宽度：900px）{
{
列数：1；
弯曲方向：立柱；
对齐项目：居中；
}
}
自闭症{
显示器：flex；
弯曲方向：柱
}
身体{
身高：100%；
填充：0px；
边际：0px；
弯曲方向：行；
证明内容：中心；
背景色：#262626！重要；
颜色：#ddd！重要；
字体系列：“Jost”，无衬线；
}

弹性项目1
弹性项目4
弹性项目2


结束
弹性项目3
弹性项目6
弹性项目5

结束
弹性项目7
弹性项目8
弹性项目9


结束
弹性项目10
弹性项目11
弹性项目12

我可以问一下为什么使用

？仅用于显示不同的高度。注意：

标记不使用，也不需要结束斜杠，而且在HTML中从未使用过。检查此项：尝试过，但不起作用。它延伸了.box的宽度。或者当屏幕很小时，保持3列。@inside_tank是的，它可以工作，但您只需要添加媒体查询来调整.box的宽度，使其适合移动/较小的屏幕。box的宽度应始终为314px。通过更小的屏幕，它应该是更少的列。然后在媒体查询中，将

弹性方向

从

列

更改为

行

，这不是我想要的。当你的浏览器越来越小的时候。框的位置应该会改变。正如我在回答中所说的，如果你想在静态其他中使用它，那么你可以创建另一种类型的这种设计，并将其隐藏在桌面上，然后使用媒体查询在移动设备上显示。

  <div class="under d-flex flex-wrap justify-content-center">
  <div class="box">Flex item 1</div>
  <div class="box">Flex item 2<br/><br/><br/>end</div>
  <div class="box">Flex item 3</div>
  <div class="box">Flex item 4</div>
  <div class="box">Flex item 5<br/><br/>end</div>
  <div class="box">Flex item 6</div>
  <div class="box">Flex item 7</div>
  <div class="box">Flex item 8</div>
  <div class="box">Flex item 9<br/><br/><br/><br/>end</div>
  <div class="box">Flex item 10</div>
  <div class="box">Flex item 11</div>
  <div class="box">Flex item 12</div>
  </div>

.under {
    width:70%;
    margin:auto;
    padding-top:40px;
    padding-bottom:40px;
    text-align:center;
    border: 1px solid green;
    overflow:auto; 
  justify-content:center;
    position:relative;
}

.box {
    text-align:center;
    width:314px;
    padding:10px;
    margin:10px;
    display:inline-block;
    border: 1px solid black;
    align-self:flex-start;
}




body {
    height:100%;
    padding:0px;
    margin:0px;
    flex-direction:column;
    justify-content:center;
    background-color:#262626!important;
    color:#ddd!important;
    font-family: 'Jost', sans-serif;
}