相关疑难解决方法(0)

我试图在一个具有设定高度的容器中将多个项目放在彼此之下.如果没有空间,物品将彼此相邻.

这是个主意:

我试图使用flexbox实现这一点,flexbox是一个设置高度的容器,方向设置为column并且flex-wrap是wrap:

问题是列之间存在很大差距.

我试着设置都justify-content和align-items到flex-start,但是这可能是默认值.

有什么方法可以解决这个问题吗？

这是代码:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

codepen

我在使用flexbox布局时遇到了一些麻烦.我想要实现的是下面的图像是如何定位的.但是,使用边距和填充,我可以将元素移动到正确的位置,而不会发生剧烈的事情.

我可能不正确地接近这个.如果有人可以给我一些建议并解释如何正确地做到这一点会很好.

线框

现在怎么样

HTML

<div style="background: grey;">
    <div class="parent-container" style="flex-direction: column; align-items: center; margin: 10px;">
        <div class="aelia-text child33">
            The first of it's kind, to<br/>
            create a better customer<br/>
            journey with reduced<br/>
            collection waiting time and<br/>
            a special moment that makes<br/>
            even the most jet-lagged<br/>
            shopper smile.
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/Aelia_Robot_highres006.jpg)'}"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/AELIA_IMAGE.jpg)'}"></div>
        </div>
    </div>
</div>

CSS

.aelia-text {
    background: white;
    color: black;
    font-size: 1.5vw;
    font-family: portland-medium-font; 
    -ms-flex-pack: center; 
    justify-content: center;
    -ms-flex-align: center;
    align-items: …

我的侧边栏比内容长(使用缩略图发布预览).

我使用flexbox来构建布局,当侧边栏比预览更长时,两者之间存在巨大差距.

我希望每一行之间没有间隙,因为如果侧边栏很好而且很短.

我把一个codepen扔在了一起.

//page wrapper for sidebar
.flexPageWrapper {
  display:flex;
  /* Centering the page */
  max-width:1500px;
  margin:0 auto;
}
//search results flexbox container
.searchContentWrap {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-right: 1em;
  flex-direction: row;
}