How to remove spaces in flex items?

Question

How to remove spaces in flex items?

B div

has a huge gap with text incremented withdisplay:flex

Adding extra div

wrap might not be a solution that can affect the mobile version. The mobile view should look like this:

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>

Run code Hide result

+3

html css flexbox css3 css-grid

Muhammed June 22. 17 at 15:45

source to share

2 answers

LGSon · Answer 1 · 2017-06-22T16:05:40+0000

Since you are using a flex direction column, they will not collapse vertically to reduce that gap, not the Flexbox way.

For the direction column, you need to set the height in the container my-wrap

to wrap flex items, so in your case and in order to have dynamically sized items, use the fold direction line:

wrap one

andtwo
change my-wrap

to line direction and addflex-wrap: wrap
make wrap-left

container flex container
install flex-grow

on one

/ two

flex items

Update

To enable mobile viewing, and since this cannot be solved with Flexbox at all, I added a small script that, based on the width, simply moves the element wrap-one

in and out wrap-left

.

It also adds a class to body elements mobileview

that can be used to target the element in a similar way using a media query.

The resize handler script has little performance impact when it is throttled.

Demo screenshot

Fragment of the stack

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

<div class="my-wrap">
  <div class="wrap-left">
    <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>
  <div class="wrap-right">
    <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>

Run code Hide result

Michael_B · Answer 2 · 2017-06-22T16:08:54+0000

First, you get abnormal behavior because you pointed flex-basis: 100%

to the green element ( .wrap-three

) without specifying the parent's height.

In CSS, in order for percentage heights to work correctly in browsers, you must always specify the parent height.

Add this to your code:

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>

Run code Hide result

Second, since you did not specify the height in the flex container, browsers are free to interpret the height as they see fit.

For a more stable layout try this (for example): .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>

Run code Hide result

Additional Information:

How to remove spaces in flex items?

More articles: