Question

我刚开始使用FLEXBOX，并且对使用台式机和移动版的布局有疑问。

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

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

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

数据--------数据--------数据-------数据

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

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

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

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

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>

任何指导都很棒！谢谢！

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

CSS显示：台式机和移动设备上的Flex

2 个答案: