CSS flex: odd behavior

Question

Please consider the following example:

<div class="z">
  <div class="z1">1</div>
  <div class="z1">2</div>
  <div class="z1">3</div>
</div>

.z {
  display: flex;
  align-items: flex-start;
  /* flex-direction: column; */
  flex-wrap: wrap;
  height: 1000px;
  background: #900;
}
.z1 {
  min-width: 51%;
  background: #0f0;
}

I can't understand this behavior of flex... why does z1 els aren't aligned one after another as if you apply flex-direction: column to it? What is the logic behind it and is there a good way of making it "automatically" switch as if it where flex-direction: column as in this example?

UPDATE: seems like I didn't explain myself correctly. Please try the above example with uncommented flex-direction property and see the desired behavior

Flex is to be applied to parent only and by default the flex direction is for row. if you need column then you have to specify that. — Manjuboyz, Apr 05 '20 at 06:51
@Manjuboyz can you elaborate your answer please? As I understand it, if the flex parent has flex-wrap set and children has more than 51% of width, they should behave as if it were flex-direction column — yajow, Apr 05 '20 at 06:56
when you say `51%` it should refer to some parent `width` isn't it, the reason it was not working as you say because you didn't specify the width value for the parent, Check my answer below. — Manjuboyz, Apr 05 '20 at 06:58

score 0 · Accepted Answer · answered Apr 05 '20 at 06:58

0

The reason is because the flex parent has a height of 1000px, the space between the elements is equally distributed.

If you want the items to come one item after another, you have to set align-content : start to your flex parent and you should be good.

I am assuming that you set the min-width to 51% just to test things out and not something else.

Here's updated fiddle: https://jsfiddle.net/81nrf6ug/

answered Apr 05 '20 at 06:58

Praveen Puglia

5,577
5
34
68

1

OMFG... dude! You rock! :D I never used this before... never! Can't believe this. Thanks a lot! – yajow Apr 05 '20 at 07:01
1

the 51% is for testing, of course. the whole example is for testing :) – yajow Apr 05 '20 at 07:02
Glad it helped! :) – Praveen Puglia Apr 05 '20 at 07:08

score -1 · Answer 2 · answered Apr 05 '20 at 06:56

-1

Have you tried with a lower min-width value or removing the min-width property. The min width is 51% and if you want all the three columns in same row, the total would be 153% and total width should not be more than 100%.

answered Apr 05 '20 at 06:56

jmfirestone

71
1
1

Apparently there has been misunderstanding, please read the updated post – yajow Apr 05 '20 at 06:59
OK. I suppose `align-content: start` has solved your issue as mentioned above. – jmfirestone Apr 05 '20 at 07:33

CSS flex: odd behavior

2 Answers2