CODEWITHSUNDEEP
cssflexbox
chrism
chrism

Reputation: 2933

Using flex to reorder elements vertically and horizontally

I'm using display: flex and order values to reorder elements for different breakpoints. It's been working well so far, but I have only been working with full-width elements so it's been straightforward up to this point. Now Id like to do the same, but put two of the elements next to each other. e.g.

<div class="wrapper">    
    <div class="object1">...</div>
    <div class="object2">...</div>
    <div class="object3">...</div>
    <div class="object4">...</div>
    <div class="object5">...</div>
</div>

Should be laid out like this:

[ object2               ]
[ object3               ]
[ object 1 ] [ object 5 ]
[ object 4              ]

My CSS looks like this so far:

.wrapper {
    display: flex;
    flex-direction: column;
}
.object1 {
    order: 3;
    width: 50%;
}
.object2 {
    order: 1;
}
.object3 {
    order: 2;
}
.object4 {
    order: 5;
}
.object5 {
    order: 4;
    width: 50%;
}

What this is giving me looks like this:

[ object2               ]
[ object3               ]
[ object 1 ]
[ object 5 ]
[ object 4              ]

Any pointers would be very gratefully received.

Upvotes: 0

Views: 4171

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

I'm not sure flex-direction:column is approproate here (without knowing the full circumstances).

Firstly you would have to enable wrapping to get two columns (and limit the height I suspect) but I think you will find the alignment of 1 & 5 problematical regardless.

See:

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  width: 80%;
  margin: 1em auto;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
  box-shadow: 0 0 1px 0 black;
}
[class^="object"] {
  text-align: center;
  border: 1px solid red;
  width: 50%;
  height: 25px;
}
.object1 {
  order: 3;
}
.object2 {
  order: 1;
}
.object3 {
  order: 2;
}
.object4 {
  order: 5;
}
.object5 {
  order: 6;
  margin-top: 50px;
}
<div class="wrapper">
  <div class="object1"><span>object1</span>
  </div>
  <div class="object2"><span>object2</span>
  </div>
  <div class="object3"><span>object3</span>
  </div>
  <div class="object4"><span>object4</span>
  </div>
  <div class="object5"><span>object5 - But alignment is manual?</span>
  </div>
</div>

However, using flex-direction:row (and wrapping)....this is simple.

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  width: 50%;
  margin: 1em auto;
  border: 1px solid grey;
  flex-wrap: wrap;
}
[class^="object"] {
  flex: 0 0 100%;
  text-align: center;
  border: 1px solid red;
}
.object1 {
  order: 3;
  flex: 0 0 50%;
}
.object2 {
  order: 1;
}
.object3 {
  order: 2;
}
.object4 {
  order: 5;
}
.object5 {
  order: 4;
  flex: 0 0 50%
}
<div class="wrapper">
  <div class="object1"><span>object1</span>
  </div>
  <div class="object2"><span>object2</span>
  </div>
  <div class="object3"><span>object3</span>
  </div>
  <div class="object4"><span>object4</span>
  </div>
  <div class="object5"><span>object5</span>
  </div>
</div>

This would be much easier with nested flexboxes and display:contents...but we're not there yet.

Upvotes: 2

Related Questions