CSS Flex item spanning two rows without fixed height

173
March 02, 2022, at 3:30 PM

I am trying to create a flex container layout whereby one of the flex items should span two rows. See image below for a better explanation:

Here is my markup:

<div class="container">
    <div class="item item-1">ITEM 1</div>
    <div class="item item-2">ITEM 2</div>
    <div class="item item-3">ITEM 3</div>
</div>

I cannot seem to achieve this, I have tried using flex-wrap and different combinations of the flex property.

I was able to achieve this by putting ITEM 1 & ITEM 2 in a separate <div>, but this presents a problem on a smaller screen, whereby ITEM 3 needs to appear BETWEEN ITEM 1 & ITEM 2. So I would rather keep the markup as is and use the order property to move things around as necessary.

Answer 1

You can use display: contents on your extra div to achieve what you want:

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  width: 100%;
}
.holder {
  width: 67%;
}
.item {
  border: 1px solid black;
}
.item-1 {
  margin-bottom: 40px;
}
.item-3 {
  width: 33%;
}
@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  }
  .item {
    margin-bottom: 20px;
  }
  .item-1 {
    order: 1;
  }
  .item-2 {
    order: 3;
  }
  .item-3 {
    order: 2;
    width: 100%;
  }
  .holder {
    width: 100%;
    display: contents;
  }
}
<div class="container">
  <div class="holder">
    <div class="item item-1">ITEM 1</div>
    <div class="item item-2">ITEM 2</div>
  </div>
  <div class="item item-3">ITEM 3</div>
</div>

Answer 2
  1. You can't achieve it using flexbox. Instead, you should have two parents which are better.

  2. Use Css-grid. Actually, css-grid is the best option in this case.

Flex-Box

* {
  color: #fff;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  border-radius: 10px;
}
.container {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid #ff0000;
}
.container .first-item {
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  width: 50%;
  height: 100%;
  margin-right: 10px;
}
.first-item .child {
  width: 100%;
  height: 50%;
  background-color: blue;
}
.first-item .child:first-child {
  margin-bottom: 10px;
}
.container .second-item {
  width: 50%;
  height: 100%;
}
.second-item .child {
  width: 100%;
  height: 100%;
  background-color: blue;
}
<div class="container">
  <div class="first-item flex">
    <div class="child flex">Item 1</div>
    <div class="child flex">Item 2</div>
  </div>
  <div class="second-item flex">
    <div class="child flex">Item 3</div>
  </div>
</div>

Grid

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  background-color: blue;
  border-radius: 10px;
}
.container {
  display: grid;
  grid-template-columns: 1fr 10px 1fr;
  grid-template-rows: 1fr 10px 1fr;
  grid-template-areas: "c1 . c3"
                       ".  . c3"
                       "c2 . c3";
 width: 500px;
  height: 300px;
  border: 1px solid red;
}
.container .child {
  border: 1px solid blue;
}
.child1 {
  grid-area: c1;
}
.child2 {
  grid-area: c2;
}
.child3 {
  grid-area: c3;
}
<div class="container">
  <div class="child child1 flex">Item 1</div>
  <div class="child child3 flex">Item 3</div>
  <div class="child child2 flex">Item 2</div>
</div>

Answer 3

i dont know if its a good solution but put two item3 codes one in the individual div (item1&2) and one outside then put the one in the div to display none in non-small screens and switch between them with mediaquery

@media (max-width: 40rem) {
.item3 {
display: none;
}
.mobile-item3{
display: block;
}
}
Rent Charter Buses Company
READ ALSO
create a notification/alert at a specific time html css angular

create a notification/alert at a specific time html css angular

i created a notification box that it shows me an alert when i create a notification from the date which i create this notification

110
&quot;page-break-before: always&quot; not working as intended after updating chrome from v97 to v98

"page-break-before: always" not working as intended after updating chrome from v97 to v98

https://cbbanalyticscom/stats/27694/games/1864019/overview - page-break-before is not working as intended on this page following chrome update from v97 to v98

122
Make div bigger then its parent [duplicate]

Make div bigger then its parent [duplicate]

is there any way how can I make div bigger then its parent? I know its bad practiceBasically I have div that is small and I need to create div inside which will be through entire window

224