Ways to organize two columns of flexible items on a responsive display

Question

Ways to organize two columns of flexible items on a responsive display

Can someone assist me with CSS flexbox for responsive screens?

Below is the layout of the flex container and items on a desktop screen: https://i.sstatic.net/AXBHw.png

The container has flex and flex-wrap properties applied, with each column having flex: 1 1 auto;.

For mobile screens, I want it to look like this: https://i.sstatic.net/SAVlJ.png

I used flex: 0 1 50% to show 2 columns in one row, but I have two specific requirements:

**1. (required) Keep the orange items next to each other regardless of screen size.** 2. (optional) Allow the possibility of displaying 2 columns in 1 cell (like the green and purple items in a single cell).

If anything is unclear or if you need more information, please feel free to ask me to clarify.

html css reactjs flexbox

Answer 1

Answer №1

To maintain the desired layout, combining the green and purple elements into one div may be the best solution. From there, adjusting the flex-basis and using order to reposition as necessary will achieve the desired result.

.flex {
    display: flex;
}
.flex > div {
    flex: 1 1 calc(100% / 7);
}
.flex > .d2-wrap {
    flex-basis: calc(100% / 7 * 2);
    display: flex;
}
.flex > .d2-wrap > div {
    flex: 1 1 auto;
}

@media screen and (max-width: 600px) {
    .flex, .flex > .d2-wrap {
        flex-wrap: wrap;
    }
    .flex > div, .flex > .d2-wrap {
        flex: 1 1 50%;
    }
    .flex > .d2-wrap > div {
        flex-basis: 100%;
    }
    .d4 {order: 1;}
    .d5 {order: 2;}
    .d1 {order: 3;}
    .d2-wrap {order: 4;}
    .d6 {order: 5;}
    .d7 {order: 6;}
}

.d1 {background: pink; height: 150px;}
.d2 {background: red; height: 100px;}
.d3 {background: green; height: 50px;}
.d4 {background: purple; height: 150px;}
.d5 {background: lightblue; height: 150px;}
.d6 {background: orange; height: 150px;}
.d7 {background: darkorange; height: 150px;}

<div class="flex">
    <div class="d1"></div>
    <div class="d2-wrap">
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
    <div class="d4"></div>
    <div class="d5"></div>
    <div class="d6"></div>
    <div class="d7"></div>
</div>

Answer 2

To maintain the desired layout, combining the green and purple elements into one div may be the best solution. From there, adjusting the flex-basis and using order to reposition as necessary will achieve the desired result.

.flex {
    display: flex;
}
.flex > div {
    flex: 1 1 calc(100% / 7);
}
.flex > .d2-wrap {
    flex-basis: calc(100% / 7 * 2);
    display: flex;
}
.flex > .d2-wrap > div {
    flex: 1 1 auto;
}

@media screen and (max-width: 600px) {
    .flex, .flex > .d2-wrap {
        flex-wrap: wrap;
    }
    .flex > div, .flex > .d2-wrap {
        flex: 1 1 50%;
    }
    .flex > .d2-wrap > div {
        flex-basis: 100%;
    }
    .d4 {order: 1;}
    .d5 {order: 2;}
    .d1 {order: 3;}
    .d2-wrap {order: 4;}
    .d6 {order: 5;}
    .d7 {order: 6;}
}

.d1 {background: pink; height: 150px;}
.d2 {background: red; height: 100px;}
.d3 {background: green; height: 50px;}
.d4 {background: purple; height: 150px;}
.d5 {background: lightblue; height: 150px;}
.d6 {background: orange; height: 150px;}
.d7 {background: darkorange; height: 150px;}

<div class="flex">
    <div class="d1"></div>
    <div class="d2-wrap">
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
    <div class="d4"></div>
    <div class="d5"></div>
    <div class="d6"></div>
    <div class="d7"></div>
</div>

Ways to organize two columns of flexible items on a responsive display

Answer №1

Similar questions

What could be causing my text input style to not update after re-rendering?

Tips on personalizing the DateTimePicker component from Material-UI

Mastering the correct application of template language in CSS files

This error is thrown when trying to access the property 'message' of an undefined value

Sending data to another page by selecting a list item

The perplexing tale of Storybook, Ionic React, and styled-components CSS sequencing puzzles

Displaying a sneak peek of the information along with a "See More" button beneath the title in React

Swapping out a <DIV> element following a specified duration

The webpack command in the terminal failed to locate the file /config/webpack/development.js

Tips for displaying a pop-up when pressing a link:

Retrieving the value of a TextField from Material-UI upon submission

CSS :hover problem, text appearing unexpectedly

What is the most effective method for retrieving data from an API and integrating it into a Redux container using Reselect within a ReactJS application

What is the best way to create a layout for Flexbox project boxes with three boxes per row?

Unable to switch between navigation items and icons

How to align a child element in the center when the parent is not centered or taking up the full width

Updating field values in Graphcool mutations that are not intended to be changed

Discovering text on a webpage and extracting its XPath or CSS using Selenium and Java

Encountering an ENOENT error in the CodeSandbox CI environment, whereas this issue does not arise in GitHub

Error parsing module: Encountered unexpected token at line 7855, character 112