Отображение CSS: Flex на рабочем столе и на мобильном устройстве

Question

Я новичок в использовании FLEXBOX и у меня есть вопрос по макету с помощью Desktop и Mobile.

Я отображаю информацию, используя метки и данные (не в форме).

На рабочем столе я бы хотел, чтобы он отображался следующим образом:

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

Данные -------- Данные -------- Данные ------- Данные

На рабочем столе метка и данные будут представлять собой% в зависимости от количества элементов.

Но на мобильном телефоне мне бы хотелось, чтобы он отображался так:

label ------ Данные -------

Метка ------ Данные -------

Метка ------ данные -------

Метка ------ Данные-------

метка ------ данные -------

На мобильном устройстве я бы хотел, чтобы метка и данные были 25% и 75% wide.

Не уверен в HTML, если он должен быть выложен так:

<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>

ИЛИ

<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>

Любое руководство было бы замечательно!Спасибо!

Answer 1

Похоже, что вы гибко относитесь к структуре HTML.
Я рекомендую группировать пары данных с родительскими элементами, создавать столбцы и строки.
С двумя вложенными флексбоксами вы можете изменить flex-direction по желанию.

/* FOR 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;
}

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




/* FOR 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>

Вот демонстрация с более чем одной строкой данных:

/* FOR 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;
  }
}


/* FOR 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>

---

Для получения дополнительных идей настоятельно рекомендую прочитать Доступные, простые, отзывчивые таблицы @ CSS-хитрости и проверитьиз других ресурсов , перечисленных там.

Answer 2

Я бы заказал их как первый вариант. Затем в представлении рабочего стола я бы сделал flex flow из column wrap, установил бы высоту для контейнера и установил для каждого flex-item 50% высоты.

На мобильном устройстве id переключитесь на flex-flow: row wrap и определите ширину контейнера, тогда каждый дочерний элемент в 25% / 75% зависит от того, какой дочерний элемент.

HTML:

<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>

CSS:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  height: 500px; // what ever you want here
}

.label, .data {
  height: 45% // Less than 50% for margins, etc.
}

@media only screen and (max-width: 900px) { //Set desired width to call 'mobile'
  .container {}
    flex-flow: row wrap;
    width: unset;
    height: 500px; //Whatever you want again
  }

  .data {
    width: 70%;
  }

  .label {
    width: 22%;
  }
}