css - 对齐不同高度的 child

标签 css flexbox

<分区>

是否可以创建一个 flexbox 布局来包裹子元素并将它们对齐到顶部?

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container .element {
  flex: 0 0 auto;
}

创建这个:

current example

但我的计划是实现这一目标:

wanted example

最佳答案

.container {
  border: 1px solid black;
  padding: 10px;
  height: 250px;
  
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  
  overflow: hidden;
  resize: both;
}

.container div {
  border: 5px solid #AAA;
  background-color: #DDD;
  margin: 3px;
  height: 100px;
  width: 50px;
}

.container div:nth-child(3n) {
  height: 40px;
}
<div>
  <div class="container">
    <div></div><div></div><div></div>
    <div></div><div></div><div></div>
    <div></div><div></div><div></div>
  </div>
</div>
Some Text

关于css - 对齐不同高度的 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51621218/

上一篇:css - 背景图片没有出现在我的网站上

下一篇:html - html5图片标签和Bootstrap如何结合使用

相关文章:

html - CSS - 在表格的右上角定位 div

jquery - 在多个元素上使用toggle() 和CSS

javascript - Flexbox 导致 adsense 错误 : "adsbygoogle.push() error: No slot size for availableWidth=0"

javascript - React Native - 居中 flexWrap 内容

html - Angular Material 简单的卡片标题在 chrome 中大小不正确

css - Angular Flex Layout 拒绝将容器水平居中,将指令应用于 div、路由器导出等所有内容,但它仍然不会居中

jQuery ui-effects-wrapper 在使用 .show ("slide"时砍掉 div 内容的底部,

javascript - 使用 Jquery 从 div 中获取 url

HTML Bootstrap 列未正确对齐

html - 使用 flexbox 调整图像和标题的大小