CODEWITHSUNDEEP
htmlcssflexbox
Nuru Salihu
Nuru Salihu

Reputation: 4928

How do i achieve the layout below in flex - css

We have a flex container containing 5 boxes and i was asked to displayed them like the image below.

I was able to achieve similar layout by placing another two containers inside the parent container. like below.

as discussed and answered Here . However, considering the project is existing , that is said to have introduced a lot of complexity that that when we adopt , would force changes in the structure of our js classes. I am now tasked with achieving the same by placing them in one single container.

.layout-5-3 {
    flex-direction: row;
    display: flex;
}

.layout-5-3 > div:nth-child(1) {
    flex-basis: 48%;
}  

.layout-5-3 > div:nth-child(2),
.layout-5-3 > div:nth-child(3),
.layout-5-3 > div:nth-child(4),
.layout-5-3 > div:nth-child(5) {
    flex-basis: 48%;
    flex-direction: column;
}

and in my html

<div class="layout-5-3">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
  <div class="box">Box4</div>
  <div class="box">Box5</div>
</div>

I was expecting my first child to the placed on the left and the remaining four occupying the other half space. Considering my basis above. Please is there any way i can achieve this without introducing another flex container inside the parent container ? Any help would be appreciated.

Upvotes: 0

Views: 119

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

This is possible but would require fixed heights on the parent and defined widths on the children...and it would still be buggy in various browsers in various ways.

Codepen Demo

.layout-5-3 {
  display: flex;
  background: lightblue;
  height: 250px;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap
}
.layout-5-3 > div {
  border: 1px solid black;
}
.layout-5-3 > div:nth-child(1) {
  width: 48%;
  flex: 0 0 100%;
  background: lightgreen;
}
.layout-5-3 > div:nth-child(2),
.layout-5-3 > div:nth-child(3),
.layout-5-3 > div:nth-child(4),
.layout-5-3 > div:nth-child(5) {
  width: 48%;
  flex: 1;
  background: pink;
}
<div class="layout-5-3">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
  <div class="box">Box4</div>
  <div class="box">Box5</div>
</div>

Upvotes: 1

Related Questions