CSS显示：桌面和移动设备上的Flex

Question

我是新手使用FLEXBOX并对使用桌面和移动设备的布局有疑问。

我正在使用标签和数据（不在表单上）显示信息。

在桌面上，我希望它显示如下：

标签------- -------标签标签标签------

日期-------- ------- --------日期日期日期

在桌面上，标签和数据将是基于元素数量的％。

但是，在手机上，我希望它显示如下：

标签------数据-------

标签------数据-------

标签------数据-------

标签------数据-------

标签------数据-------

在移动设备上，我希望标签和数据的宽度为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>

要么

<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结构非常灵活。 我建议将数据对与父元素分组，制作列和行。 使用两个嵌套的flexbox，您可以根据需要更改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>

---

对于更多的想法，我强烈建议阅读Accessible, Simple, Responsive Tables @ CSS-Tricks并查看那里列出的other resources。

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%;
  }
}