如何消除弹性项目中的空白？

时间：2017-06-22 15:45:44

标签： html css css3 flexbox css-grid

div中出现巨大差距，文字随着display:flex而增加

enter image description here

添加额外的div换行可能不是可能影响移动版本的解决方案。 移动视图应如下所示

enter image description here 

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
  // flex-direction: column;
}

.my-wrap {
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one,
.wrap-two {
  width: 75%;
}

.wrap-one {
  background-color: tomato;
  flex: 1;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
  flex-basis: 100%;
  width: 25%;
}
<div class="my-wrap">
  <div class="wrap-one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <div class="wrap-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <div class="wrap-three">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

由于您正在使用弹性方向列，因此它们不会垂直折叠以减小间隙，这不是Flexbox的工作方式。

对于弹性方向列，您需要在my-wrap容器上设置要包装的弹性项目的高度，因此，在您的情况下，为了能够使用动态大小的项目，请使用弹性方向行：< / p>

  • 包裹one和two
  • 将my-wrap更改为行方向并添加flex-wrap: wrap
  • 使wrap-left成为灵活列容器
  • 在flex-grow / one flex items
    • 上设置two

更新

为了启用移动视图，由于根本无法使用Flexbox解决，我添加了一个小脚本，根据宽度，只需将wrap-one元素移入和移出{{ 1}}元素。

它还为body元素wrap-left添加了一个类，可以使用媒体查询以类似的方式来定位元素。

脚本的resize处理程序在受到限制时几乎没有任何性能影响。

Fiddle demo

Stack snippet 

mobileview
(function(d, w, timeout) {

  /* custom variables */
  var flexcontainer = '.wrap-left',
    flexitem = '.wrap-one',
    minwidth = 600,             /* if null, then when viewport is portrait */
    classname = 'mobileview';
    
  /* here happens the magic */
  function resizeing() {
    if ((minwidth && (minwidth < w.innerWidth)) ||
        (!minwidth && (w.innerHeight < w.innerWidth))) {
      if (d.body.classList.contains(classname)) {      
        /* move it back inside the main flexcontainer */
        d.body.classList.remove(classname)
        var fca = qSA(flexcontainer);
        for (var i = 0; i < fca.length; i++) {
          fca[i].appendChild(qS(flexitem, fca[i].parentNode))
        }
      }      
    } else {
      if (!(d.body.classList.contains(classname))) {
        /* move it outside the main flexcontainer */
        d.body.classList.add(classname);
        var fca = qSA(flexcontainer);
        for (var i = 0; i < fca.length; i++) {
          fca[i].parentNode.appendChild(qS(flexitem, fca[i]))
        }
      }
    }
  }
  
  /* run at page load init resize */
  w.addEventListener("load", function() {
    resizeing();
  }, false);
  
  /* grab when viewport resize */
  w.addEventListener("resize", function() {
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        resizeing();
      }, 66);
    }
  }, false);
  
  /* helper variables */
  var qSA = function(s, el) {
      return (el) ? el.querySelectorAll(s) :
        d.querySelectorAll(s)
    },
    qS = function(s, el) {
      return (el) ? el.querySelector(s) :
        d.querySelector(s)
    };
}(document, window));
p {
  margin: 10px;
}
body {
  display: flex;
}

.my-wrap {
  width: 90%;
  margin: 30px auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-left {
  flex: 0 0 75%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
  .wrap-one {
    flex-grow: 1;
    background-color: tomato;
  }
  .wrap-two {
    flex-grow: 1;
    background-color: deepskyblue;
  }
  
.wrap-right {
  flex: 0 0 25%;
  min-width: 0;
  background-color: greenyellow;
}

/*  for mobile layout  */
.my-wrap > .wrap-one {
  flex: 0 0 100%;
  order: -1;
}
.mobileview .wrap-right {
  background-color: green;
}

答案 1 :(得分：1)

首先，由于您在绿色项目flex-basis: 100%上指定了.wrap-three，而未在父项上指定高度，因此您的行为异常。

在CSS中，要在浏览器之间正常工作的百分比高度，您应该始终指定父级的高度。

将此添加到您的代码中：

html, body, .my-wrap { height: 100%; }


html,
body,
.my-wrap {
  height: 100%;
}

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one,
.wrap-two {
  width: 75%;
}

.wrap-one {
  background-color: tomato;
  flex: 1;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
  flex-basis: 100%;
  width: 25%;
}
<div class="my-wrap">
  <div class="wrap-one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <div class="wrap-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <div class="wrap-three">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

其次，由于您没有在Flex容器上指定高度，因此浏览器可以自由决定高度。

要获得更稳定的布局，请尝试此操作（例如）：.my-wrap { height: 300px } 

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  height: 300px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one,
.wrap-two {
  width: 75%;
}

.wrap-one {
  background-color: tomato;
  flex: 1;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
  flex-basis: 100%;
  width: 25%;
}
<div class="my-wrap">
  <div class="wrap-one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <div class="wrap-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <div class="wrap-three">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

更多信息：

相关问题
最新问题