Flex and Flex-wrap wrap not working?

Question

display: flex; //Parent element

and

flex-wrap: wrap; //Direct child elements

Each grid has to fill 25% of the containers width and go down automatically..

But currently they do not act like flex-wrap: wrap; they act like they are 20% width when there are 5 grids... its a bit weird because they are set to be 25% ?

If I put Flex-wrap: wrap; on the parent element where I currently have display:flex; it works, but then they are not equal heights?

What do I do in this situation? I can't figure out how to do this

Find the example here: http://www.chri126g.wigf1.sde.dk/DUER1/

HTML

<div class="global-wrapper">

<div class="dueWrapper flex">

  <div class="dueOuter col25 flex-w-w">
    <div class="dueInner flex-d-r">
      <img src="img/salg/1.jpg" alt="due">
      <table>
        <tr>
          <td>Navn</td>
          <td>Smith</td>
        </tr>
        <tr>
          <td>Far</td>
          <td>Jackson</td>
        </tr>
        <tr>
          <td>Mor</td>
          <td>Emelie</td>
        </tr>
        <tr>
          <td>Pris</td>
          <td>500kr</td>
        </tr>
      </table>
    </div>
  </div>

  <div class="dueOuter col25 flex-w-w">
    <div class="dueInner flex-d-r">
      <img src="img/salg/2.jpg" alt="due">

    </div>
  </div>

  <div class="dueOuter col25 flex-w-w">
    <div class="dueInner flex-d-r">
      <img src="img/salg/3.jpg" alt="due">

    </div>
  </div>

  <div class="dueOuter col25 flex-w-w">
    <div class="dueInner flex-d-r">
      <img src="img/salg/3.jpg" alt="due">

    </div>
  </div>

  <div class="dueOuter col25 flex-w-w">
    <div class="dueInner flex-d-r">
      <img src="img/salg/3.jpg" alt="due">

    </div>
  </div>

</div><!--/DUE-WRAPPER-->
</div><!--/GLOBAL-WRAPPER-->
CSS

.flex {
  display: flex;
}
.flex1{
  flex: 1;
}
.flex-d-r{
  display: flex;
  flex-direction: column;
}
.flex-w-w{
  display: flex;
  flex-wrap: wrap;
}
body{
  background-color: lightgrey;
}
.global-wrapper{
  padding: 5px;
  width: 90%;
  min-height: 100vh;
  max-width: 1000px;
  margin: 0 auto;
  background-color: #fff;
}

.dueOuter{
  padding: 5px;
}

.dueInner{
  outline: 1px solid #000;
  min-height: 100px;
  transition: 0.3s ease;
  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75);
}

.dueInner:hover{
  b: 3px solid #000;
}
.dueInner img{
  width: 100%;
}
td{
  width: 100%;
}
tr:nth-of-type(odd){
  background-color: lightgrey;
}

`flex-wrap` goes on the container, not the items. Also, post your code so we can reproduce the problem you're having. — Michael Benjamin, Dec 29 '16 at 16:15
Check here https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for how to use flex. You are using flex-wrap on the wrong element. The height should be equal by default due to `align-items: stretch` on the flex wrapper. Unless you have changed that. SHow your code please — Huangism, Dec 29 '16 at 16:18
Well the guide i followed said Flex on parent element, and flex-wrap: wrap on child elements like — Christian Lauridsen, Dec 29 '16 at 16:22
http://clearleft.com/thinks/270 might have gotten something wrong, its some time ago i worked with this myself — Christian Lauridsen, Dec 29 '16 at 16:24
Just looked at the link and where it mentions flex wrap it is correct, `Step 2: Create a flexbox container` — Huangism, Dec 29 '16 at 16:26
Are you looking for an equal height solution using CSS only? — Asons, Dec 29 '16 at 17:09

score 3 · Accepted Answer · edited May 23 '17 at 12:00

3

You can not do that using flexbox. As I quote this answer by Michael_B on this question

Flex Lines

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property.

In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the "minimum size necessary to contain the flex items on the line".

If you are looking for a javascript alternative. Here's what you need to add just before </body>:

<script type="text/javascript">
  var SdueOuter = document.querySelectorAll(".dueOuter");
  var maxHeight = 0;
  for(i=0;i<SdueOuter.length;i++){
   if(SdueOuter[i]){
     var currentHeight = SdueOuter[i].offsetHeight;
     if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  for(i=0;i<SdueOuter.length;i++){
    SdueOuter[i].style.height = maxHeight+"px";
  }
</script>

edited May 23 '17 at 12:00

Community

1
1

answered Dec 29 '16 at 16:25

ab29007

7,611
2
17
43

Hmm it should be possible to have equal height grids with flex? – Christian Lauridsen Dec 29 '16 at 16:26
@ChristianLauridsen equal height will be obtained on a given row only – Huangism Dec 29 '16 at 16:28
@Christian Laurudsen No you can't unless you fix height of your div. which is not good for responsive design. I think you should go with the jquery option. – ab29007 Dec 29 '16 at 16:28
I only write pure vanilla, we are taught not to use Jquery at the coding education im currently taking (1.5years untill im finished :) – Christian Lauridsen Dec 29 '16 at 16:32
okay, I updated my answer. If it solves your problem, please do accept my answer. you know click on the checkmark on the eft of my answer. – ab29007 Dec 29 '16 at 16:59
Yepp this worked as a charm, great job and thanks will keep this snippets for future projects :) – Christian Lauridsen Dec 29 '16 at 17:13
I do actually experince a problem now – Christian Lauridsen Dec 29 '16 at 19:13

score 0 · Answer 2 · answered Dec 29 '16 at 16:26

0

For the parent element (the one with display:flex) You need to add: flex-wrap: wrap; align-items: stretch;

Then to have size no-matter what content you have inside you have two options: 1. Calculate highiest div height with js and apply min-height: [top-height] to all children divs. 2. OR if You can estimate max height - just do it in css using min-height.

I'm 99% sure there is no way to achieve it using pure flexbox with flex-wrap and different contents.

answered Dec 29 '16 at 16:26

Szymon Jankowski

21
4

there is no need to add `align-items: stretch` that is by default – Huangism Dec 29 '16 at 16:28
Well i can't talk this through with my teachers before 2. Jan.. but it should be possible atleast i think, maybe a hack of some sort but i dunno i cant seem to figure it out... The problem with the CSS calc (i think) is that there will be different descriptions, and i havent worked that much with calc yet hmm – Christian Lauridsen Dec 29 '16 at 16:39

Flex and Flex-wrap wrap not working?

2 Answers2