Flex 方向列，但两个子项彼此相邻，桌面顺序不同

Posted 2023-03-06

【中文标题】Flex 方向列，但两个子项彼此相邻，桌面顺序不同

【英文标题】：Flex direction column but two of the children next to each other with different order for desktop

【发布时间】：2017-04-08 16:31:46

【问题描述】：

这是响应式设计的一部分，其中桌面版的布局为flex-direction: row，移动版的布局必须为flex-direction: column。但是，one 和 three 这两个元素必须彼此相邻，而不是彼此重叠。 （您不能将它们单独放在容器中，因为这会破坏桌面布局）。

有什么方法可以用 Flexbox 实现这一点吗？

.flex-container-desktop 
  display: flex;
  flex-direction: row;


.flex-container 
  display: flex;
  flex-direction: column;


.child 
  border: 1px solid red;
  margin-right: 10px;
  padding: 5px;


.two 
  order: 1;


.three 
  order: 2;


.one 
  order: 3;

<b>Desktop</b>
<div class="flex-container-desktop">
  <div class="child one-desktop">
Child 1
  </div>
  <div class="child two-desktop">
Child 2
  </div>
  <div class="child three-desktop">
Child 3
  </div>
</div>
<hr>
<b>Mobile</b>
<div class="flex-container">
  <div class="child one">
Child 1
  </div>
  <div class="child two">
Child 2
  </div>
  <div class="child three">
Child 3
  </div>
</div>

<br>
Child 3 and 1 should be next to each other only on mobile.

【参考方案1】：

您可以使用flex-direction: row 和媒体查询来做到这一点。因此，当其移动视图时，您更改顺序并使用flex: 0 0 100% 和其他两个元素50% 使第一个元素占据全宽。设置flex-wrap: wrap 也很重要，因此其他两个元素会转到下一行。

* 
  box-sizing: border-box;

.flex-container 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

.child 
  border: 1px solid;
  flex: 1;
  padding: 5px;

@media(max-width: 768px) 
  .two 
    order: 1;
    flex: 0 0 100%;
  
  .three 
    order: 2;
    flex: 0 0 50%;
  
  .one 
    order: 3;
    flex: 0 0 50%;
  

<div class="flex-container">
  <div class="child one">
    Child 1
  </div>
  <div class="child two">
    Child 2
  </div>
  <div class="child three">
    Child 3
  </div>
</div>

【讨论】：

似乎是最合乎逻辑的选择。

啊哈。我正在“媒体查询”从行到列的 flex-direction，然后试图找到一种方法让 2 个孩子与 flex-basis 并排运行 .. 但显然“列”比宽度强:)。