display flex blocks in 3 columns with correct order

Question

is something like this achievable with flexbox or any other css technique not involving putting each column inside wrapper?

enter image description here

best result aligns them in correct order, but 4th element is under longest container not under element above it.

I'm using compass, and at the moment my scss is:

  ul.level0 {
    @include display-flex;
    @include flex-flow(row wrap);
    @include justify-content(flex-end);
    @include align-items(flex-start);
    @include align-content(flex-start);

    .menu-group {
      @include display-flex(inline-flex);
      vertical-align: top;
      width: 33.33%;
      margin-bottom: 30px;
      padding: 0 5px;

      li {
        display: block;
        text-align: left;
        margin-bottom: 3px;
      }

      .group-title {
        margin-bottom: 12px;
        text-transform: uppercase;
      }
    }
  }

nop, it breaks into lines and all elements gets the same height(tallest on line sets the height) — G-Cyrillus, Feb 25 '15 at 15:49
in fact elemnt heights are correct, they are not stretched to match line height (not adapting to largest element) — pankijs, Feb 25 '15 at 15:51
actually it does with flex-wrap and order , http://codepen.io/anon/pen/zxjQLe my mistake :) — G-Cyrillus, Feb 25 '15 at 15:56

score 3 · Answer 1 · answered Feb 25 '15 at 15:58

3

You may use flex-wrap , flex-direction and order:

ul {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:300px;
  margin:1em;
  padding:0;
  list-style-type:none;
}
li {height:80px;
border:solid;
width:30%;
margin:1em;
order:5}
li:nth-child(odd) {
  height:40px;
}
li:first-child {
  height:100%;
}
li:nth-child(1) {
  order:1
}
li:nth-child(2) {
  order:2
}
li:nth-child(3) {
  order:4
}
li:nth-child(4) {
  order:3
}
li:nth-child(5) {
  order:5
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

answered Feb 25 '15 at 15:58

G-Cyrillus

101,410
14
105
129

interesting, it works in codepen, but not inside my page, flex-direction:column; just puts all li elements 1 under other in 1 column. – pankijs Feb 25 '15 at 16:08
2

@pankijs That's because column orientation requires an explicit height in order to force wrapping. – cimmanon Feb 25 '15 at 16:18
It is kind of sad that such nice answers often earn so little recognition – Nico O Feb 25 '15 at 18:08
@NicoO answer kinda works, but it is not correct in my case, there is fixed height involved, but I need universal solution since column heights varies depending of content, so no fixed height. I upvoted this answer, but it is not suitable for me. ended up using jquery and absolute positions. :( – pankijs Feb 26 '15 at 16:56
@pankijs can you give an example of html with content (fake or real) close to what you have to deal with? – G-Cyrillus Feb 26 '15 at 19:14
@pankijs you can use/play with this http://codepen.io/anon/pen/wBXzzZ i'll be offline a few days – G-Cyrillus Feb 26 '15 at 19:45
@GCyrillus http://codepen.io/anon/pen/dPKpvm, im trying to position "Highlights" http://i.imgur.com/YLuzAfa.png , 1st, 2nd and 3rd group will be changing couple of times in a month. – pankijs Feb 26 '15 at 19:58
@GCyrillus real problem is that elements have to be in order 1234 and aligned in right side, so if I have 4, 4th will be on right side, if I have 2 1st will be in middle and 2nd will be on right side and so on. – pankijs Feb 26 '15 at 21:42

display flex blocks in 3 columns with correct order

1 Answers1