Flexbox 改变元素的位置

Question

是否可以使用 flexbox 来做这个例子中的事情？基本上，我想在移动设备中查看时将列中的元素翻转为一行。你会怎么做呢？

<p> Desktop:</p>
<table style="height: 52px;" width="331">
<tbody>
<tr>
<td style="width: 103.533px;">image-icon1</td>
<td style="width: 103.533px;">image-icon2</td>
<td style="width: 103.533px;">image-icon3</td>
</tr>
<tr>
<td style="width: 103.533px;">Text1</td>
<td style="width: 103.533px;">Text2</td>
<td style="width: 103.533px;">Text3</td>
</tr>
</tbody>
</table>
<p> Mobile:</p>
<table style="height: 71px;" width="189">
<tbody>
<tr>
<td style="width: 87.1px;">image-icon1</td>
<td style="width: 87.1px;">Text1</td>
</tr>
<tr>
<td style="width: 87.1px;">image-icon2</td>
<td style="width: 87.1px;">Text2</td>
</tr>
<tr>
<td style="width: 87.1px;">image-icon3</td>
<td style="width: 87.1px;">Text3</td>
</tr>
</tbody>
</table>

Answer 1

是的，有可能

查看以下示例。

我正在使用 CSS 媒体查询@media(max-width:768px) 来检查屏幕宽度是否小于 768px（可以是小于此的任何值）。

据此，我将 flex 子项的方向设置为 column，以便子项可以相互堆叠。

除此之外，在手机屏幕上，我还设置了内部容器（.secclass）的显示为flex，

<div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div>

这样，它的子节点就会排成一行。

.container {
  display: flex;
  flex-direction: row;/* default value*/
}
.text,.img{
  padding:10px;
}
.sec {
  flex: 1;
  background-color: wheat;
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

@media(max-width:768px) { /* can be anything less than this*/
  .container {
    flex-direction: column;
  }
  .sec {
    display: flex;
    flex-direction: row;/* default value*/
  }
 
  
}

<div class="container">
  <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div>
  <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div>


</div>