如何将div与不同的高度对齐？

Question

我正在尝试像这里一样对齐 div：https://i.imgur.com/dcUnEkO.png

但结果错误：https://codepen.io/online123/pen/VwvGoQP

HTML：

  <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>

CSS：

.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;
}

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

Answer 1

如果您希望它以静态方式而不是在它们上创建任何 map 循环，那么您可以通过这种方式实现它。

.under {
	width:70%;
	margin:auto;
	padding-top:40px;
	padding-bottom:40px;
	text-align:center;
	border: 1px solid green;
	overflow:auto; 
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content: center;
	position:relative;
	column-count: 5;
}

.box {
	text-align:center;
	width:314px;
  min-width:314px;
	padding:10px;
	margin:10px;
	display:inline-block;
	box-shadow: 0px 4px #1c1c1c;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: #363636;
	border: 1px solid red;
}

@media screen and (max-width: 2450px) {
		.under {
			column-count: 4;
		}
}

@media screen and (max-width: 1900px) {
		.under {
			column-count: 3;
		}
}

@media screen and (max-width: 1350px) {
		.under {
			column-count: 2;
      flex-direction:column;
      align-items:center;
		}
}

@media screen and (max-width: 900px) {
		.under {
			column-count: 1;
      flex-direction:column;
      align-items:center;
		}
}


asd{
  display:flex;
  flex-direction:column
}


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

<div class="under">
  <div class='asd'>
    <div class="box">Flex item 1</div>
    <div class="box">Flex item 4</div>
  </div>
  <div class="box">Flex item 2<br><br><br>end</div>
  <div class='asd'>
    <div class="box">Flex item 3</div>  
    <div class="box">Flex item 6</div>
  </div>
  <div class="box">Flex item 5<br><br/>end</div>
  <div class='asd'>
    <div class="box">Flex item 7</div>
    <div class="box">Flex item 8</div>
  </div>
  <div class="box">Flex item 9<br><br><br><br>end</div>
  <div class='asd'>
    <div class="box">Flex item 10</div>
    <div class="box">Flex item 11</div>
    <div class="box">Flex item 12</div>
  </div>
</div>

更新答案请查看并运行