CODEWITHSUNDEEP
htmlcssflexbox
I am not Fat
I am not Fat

Reputation: 447

Placing a flex item under another flex item in a flex box container

I want in this case 2.5 to be placed below 2 - but the flexbox container forces it to be placed along the same row, rather than place it under the div that is already at that particular order.

How do I using flexbox - place my div containing 2.5 under the div containing 2 - given this html.

I was trying to accomplish this in ie using grid but where not able to do so, as grid is not fully supported in ie.. Which is why I am trying to see whether I can do this for ie only.

Codepen: https://codepen.io/anon/pen/ewqmXw

.flex-container {
    display: flex;
}

.item-1 {
    order:1;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    width: 50px;
}

.item-2 {
    order:2;
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    width: 50px;
}

.item-3 {
    order:3;
    background-color: rgba(145,520,0,.75);
    width: 50px;
}

.item-4 {
    order:4;
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    width: 50px;

}

.item2half {
    order:2;
    background-color: rgb(20,100,255);
    border-color: transparent;
    width: 50px;
}
<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item2half">2.5</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

Upvotes: 2

Views: 2050

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371231

So here's how I understand your requirements:

  • item 2.5 must be underneath item 2
  • can't use Grid, only flexbox
  • can't alter the HTML

Here's one solution:

  • Your flex items are 50px in length.
  • You'll need 4 per row.
  • So instead of defining the item widths in pixels, set the container to width: 200px and the items to width: 25% (of flex-basis: 25%)
  • Now you can wrap the items. Set the container to wrap.
  • Create a pseudo-element to serve as a sixth item.
  • This item will be transparent and occupy the space under item 1.
  • Use the order property to ensure item 2.5 is in last place.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

.item-1 {
  flex: 0 0 25%;
  order: 1;
  background-color: rgba(200, 520, 266, 0.75);
}

.item-2 {
  flex: 0 0 25%;
  order: 2;
  background-color: rgba(145, 223, 0, 0.75);
}

.item-3 {
  flex: 0 0 25%;
  order: 3;
  background-color: rgba(145, 520, 0, 0.75);
}

.item-4 {
  flex: 0 0 25%;
  order: 4;
  background-color: rgba(0, 0, 0, 0.25);
}

.flex-container::after {
  flex: 0 0 25%;
  order: 5;
  background-color: transparent;
  content: "";
}

.item2half {
  flex: 0 0 25%;
  order: 6;
  background-color: aqua;
}
<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item2half">2.5</div>
  <div class="item-4">4</div>
</div>

Upvotes: 2

Minal Chauhan
Minal Chauhan

Reputation: 6148

I have add item2half in item-2 div

.flex-container {
    display: flex;
}

.item-1 {
    order:1;
    background-color: rgba(200,520,266,.75);
    border-color: #b4b4b4;
    width: 50px;
}

.item-2 {
    order:2;
    background-color: rgba(145,223,0,.75);
    border-color: transparent;
    width: 50px;
}

.item-3 {
    order:3;
    background-color: rgba(145,520,0,.75);
    width: 50px;
}

.item-4 {
    order:4;
    background-color: rgba(0,0,0,.25);
    border-color: transparent;
    width: 50px;

}

.item2half {
    order:2;
    background-color: rgb(20,100,255);
    border-color: transparent;
    width: 50px;
}
<div class="flex-container">
  <div class="item-1">1</div>
  <div class="item-2">2
    <div class="item2half">2.5</div>
  </div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

Upvotes: 0

Related Questions