Utilizing CSS Flexbox for both desktop and mobile layouts

Question

Utilizing CSS Flexbox for both desktop and mobile layouts

As I venture into the world of FLEXBOX, I find myself pondering a layout challenge that involves both Desktop and Mobile views.

The content I need to display consists of labels and corresponding data (not part of a form).

For Desktop view, my vision is for it to look like this:

label-------label-------label------label

Data--------Data--------Data-------Data

On Desktop, the width of label and data will be based on percentages depending on the number of elements present.

However, when switching to mobile, I envision the layout to transform into this:

label------ Data-------

Label------ Data-------

label------ data-------

Label------ Data-------

label------ data-------

When viewed on a mobile device, I aim for the label and data segments to each occupy 25% and 75% respectively.

I'm unsure whether the HTML setup should follow this structure:

<div class="container">
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
</div>

OR

<div class="container">
   <div class="label">label</div>
   <div class="label">label</div>
   <div class="label">label</div>
</div>
<div class="container">
   <div class="data">data</div>
   <div class="data">data</div>
   <div class="data">data</div>
</div>

Any advice or pointers on how to approach this would be highly appreciated! Thank you!

css flexbox

Answer 1

Answer №1

It seems like you are open to different HTML structures.
My suggestion is to organize data pairs using parent elements to create columns and rows effectively.
By utilizing two nested flexboxes, you have the flexibility to adjust the flex-direction as needed.

/* DEMO PURPOSES ONLY */
var $body = $('body');
$('button').on('click', function() {
  $body.toggleClass('small');
});

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgreen;
}

.group {
  display: flex;
  flex-direction: column;
}

.item {
  padding: .25em .5em;
}

@media (min-width: 700px) {
  .container {
    background-color: lightblue;
    flex-direction: column;
  }
  .group {
    flex-direction: row;
  }
}




/* DEMO PURPOSES */

.small .container {
  background-color: lightblue;
  flex-direction: column;
}
.small .group {
  flex-direction: row;
}
button {
  position: absolute;
  top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="group">
    <div class="item label">Label 1</div>
    <div class="item data">Data 1</div>
  </div>
  <div class="group">
    <div class="item label">Label 2</div>
    <div class="item data">Data 2</div>
  </div>
  <div class="group">
    <div class="item label">Label 3</div>
    <div class="item data">Data 3</div>
  </div>
</div>


<button>Simulate Size Change</button>

To showcase multiple rows of data in a demo:

/* DEMO PURPOSES */
var $body = $('body');
$('button').on('click', function() {
  $body.toggleClass('small');
});

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgreen;
}
.group {
  display: flex;
  flex-direction: column;
}
.item {
  padding: .25em .5em;
}
.label {
  font-weight:bold;
}
.flag {
  color:red;
}

@media (min-width: 700px) {
  .container {
    background-color: lightblue;
    flex-direction: column;
  }
  .group {
    flex-direction: row;
  }
}


/* DEMO PURPOSES */

.small .container {
  background-color: lightblue;
  flex-direction: column;
}
.small .group {
  flex-direction: row;
}
button {
  position: absolute;
  top: 130px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="group">
    <div class="item label">Label 1</div>
    <div class="item data">Data 1a</div>
    <div class="item data flag">Data 1b</div>
    <div class="item data">Data 1c</div>
  </div>
  <div class="group">
    <div class="item label">Label 2</div>
    <div class="item data">Data 2a</div>
  </div>
  <div class="group">
    <div class="item label">Label 3</div>
    <div class="item data">Data 3a</div>
    <div class="item data">Data 3b</div>
  </div>
</div>


<button>Simulate Size Change</button>

If you're looking for more tips, I recommend exploring Accessible, Simple, Responsive Tables @ CSS-Tricks for valuable insights and resources on building responsive tables.

Answer 2

It seems like you are open to different HTML structures.
My suggestion is to organize data pairs using parent elements to create columns and rows effectively.
By utilizing two nested flexboxes, you have the flexibility to adjust the flex-direction as needed.

/* DEMO PURPOSES ONLY */
var $body = $('body');
$('button').on('click', function() {
  $body.toggleClass('small');
});

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgreen;
}

.group {
  display: flex;
  flex-direction: column;
}

.item {
  padding: .25em .5em;
}

@media (min-width: 700px) {
  .container {
    background-color: lightblue;
    flex-direction: column;
  }
  .group {
    flex-direction: row;
  }
}




/* DEMO PURPOSES */

.small .container {
  background-color: lightblue;
  flex-direction: column;
}
.small .group {
  flex-direction: row;
}
button {
  position: absolute;
  top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="group">
    <div class="item label">Label 1</div>
    <div class="item data">Data 1</div>
  </div>
  <div class="group">
    <div class="item label">Label 2</div>
    <div class="item data">Data 2</div>
  </div>
  <div class="group">
    <div class="item label">Label 3</div>
    <div class="item data">Data 3</div>
  </div>
</div>


<button>Simulate Size Change</button>

To showcase multiple rows of data in a demo:

/* DEMO PURPOSES */
var $body = $('body');
$('button').on('click', function() {
  $body.toggleClass('small');
});

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgreen;
}
.group {
  display: flex;
  flex-direction: column;
}
.item {
  padding: .25em .5em;
}
.label {
  font-weight:bold;
}
.flag {
  color:red;
}

@media (min-width: 700px) {
  .container {
    background-color: lightblue;
    flex-direction: column;
  }
  .group {
    flex-direction: row;
  }
}


/* DEMO PURPOSES */

.small .container {
  background-color: lightblue;
  flex-direction: column;
}
.small .group {
  flex-direction: row;
}
button {
  position: absolute;
  top: 130px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="group">
    <div class="item label">Label 1</div>
    <div class="item data">Data 1a</div>
    <div class="item data flag">Data 1b</div>
    <div class="item data">Data 1c</div>
  </div>
  <div class="group">
    <div class="item label">Label 2</div>
    <div class="item data">Data 2a</div>
  </div>
  <div class="group">
    <div class="item label">Label 3</div>
    <div class="item data">Data 3a</div>
    <div class="item data">Data 3b</div>
  </div>
</div>


<button>Simulate Size Change</button>

If you're looking for more tips, I recommend exploring Accessible, Simple, Responsive Tables @ CSS-Tricks for valuable insights and resources on building responsive tables.

Answer 3

Answer №2

I prefer the first option for ordering. For desktop view, I would implement a flex flow of column wrap, specify a height for the container, and set each flex-item to be 50% in height.

When it comes to mobile view, I would switch to flex-flow: row wrap, define the container's width, and adjust each child to take up 25%/75% depending on the specific child.

Here's the HTML structure:

<div class="container">
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
</div>

And here's the corresponding CSS:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 500px; // Set your preferred height here
}

.label, .data {
  height: 45%; // Slightly less than 50% to account for margins
}

@media only screen and (max-width: 900px) { // Define 'mobile' based on desired width
  .container {
    flex-flow: row wrap;
    width: unset;
    height: 500px; // Adjust as needed
  }

  .data {
    width: 70%;
  }

  .label {
    width: 22%;
  }
}

Answer 4

I prefer the first option for ordering. For desktop view, I would implement a flex flow of column wrap, specify a height for the container, and set each flex-item to be 50% in height.

When it comes to mobile view, I would switch to flex-flow: row wrap, define the container's width, and adjust each child to take up 25%/75% depending on the specific child.

Here's the HTML structure:

<div class="container">
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
</div>

And here's the corresponding CSS:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 500px; // Set your preferred height here
}

.label, .data {
  height: 45%; // Slightly less than 50% to account for margins
}

@media only screen and (max-width: 900px) { // Define 'mobile' based on desired width
  .container {
    flex-flow: row wrap;
    width: unset;
    height: 500px; // Adjust as needed
  }

  .data {
    width: 70%;
  }

  .label {
    width: 22%;
  }
}

Utilizing CSS Flexbox for both desktop and mobile layouts

Answer №1

Answer №2

Similar questions

What is the best way to make an input text the focus when an item on a dropdown menu is clicked?

Creating a toggle label using just CSS: a step-by-step guide

Conflicting CSS media queries causing style inconsistencies

Difficulty loading CSS in PugJS

Accordion Widget in Bootstrap fails to initiate with proper icon

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

Create the design shown below without using the <pre> tag

Scroll upwards within a nested div

Eliminate any vacant areas within a container and shift the container, along with its contents, on the webpage

Div with Navigation Bar

Embed a webpage into a PowerPoint presentation

CSS Only Sidebar Dropdown (without using Bootstrap)

Is it possible to assign the margin-bottom property of one element to be equal to the dynamic height of a sibling element?

Mastering Instagram Automation: Techniques for Navigating the Lightbox with Selenium

Tips for creating a div element that closes on the second click:

Exploring different ways to customize the grid style in Angular 6

Display the list of articles in a three-column format

Maintain the alignment of content in the center while expanding background images

Would it be feasible to incorporate an additional icon next to the arrow in a bootstrap accordion?

When an image is a child of the parent content and another element has opacity set, the CSS stack order will be altered