CSS Display Flex on Desktop and Mobile

0 votes

I'm newer to using FLEXBOX and have a question on a layout using Desktop and Mobile.

I'm displaying info using a label and data (not on a form).

On the desktop, I'd like it to display like this:

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

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

On a desktop, labels and data will be a % based on the number of elements.

But, on a mobile, I'd like it to display like this:

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

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

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

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

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

On mobile, I'd like the label and data to be 25% & 75% wide.

Not sure the HTML if it should be laid out like this

<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, It would be great! Thanks!

Jul 18 in CSS by Edureka
• 9,940 points
9 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
0 answers

Using Flex CSS and Bootstrap for a responsive layout

I've been playing with fully responsive layouts ...READ MORE

Jun 30 in CSS by Edureka
• 9,940 points
11 views
0 votes
1 answer

Set cellpadding and cellspacing in CSS?

For controlling "cellpadding" in CSS, you can ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
12 views
0 votes
1 answer

What is the proper way to display a logo with CSS?

An <img> element is the proper way ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
31 views
0 votes
1 answer

Setting top and left CSS attributes

You can alternatively use the setProperty method, ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
19 views
0 votes
1 answer

How to create material design input form using css and bootstrap?

Try with this code. HTML: <div class="main_div"> ...READ MORE

answered Jun 21 in CSS by Edureka
• 9,540 points
114 views
0 votes
1 answer
0 votes
1 answer

Why vh works and % doesn't? (height css)

The height of an element, by default, ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
54 views
0 votes
1 answer

Flex wrap and overflow on both column and row

Here's a workaround, but it comes with ...READ MORE

answered Jun 13 in CSS by Edureka
• 9,540 points
112 views
0 votes
1 answer

What does flex: 1 mean?

If an element has flex: 1, it ...READ MORE

answered Jun 17 in CSS by Edureka
• 9,540 points
26 views
0 votes
1 answer

Controlling the amount of space in justify-content: space-between

The justify-content property positions flex items on ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
23 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP