将 flexbox 网格转换为具有不同顺序的堆叠

Posted 2023-03-05

【中文标题】将 flexbox 网格转换为具有不同顺序的堆叠

【英文标题】：Convert a flexbox grid to stacked with different order

【发布时间】：2018-03-13 14:39:00

【问题描述】：

我需要实现以下响应式布局：

这是我的桌面设备代码：

.container 
  background-color: red;
  display: flex;


.sidebar-wrapper 
  @media only screen and (min-width: 600px) 
    width: 264px;
    padding-right: 30px;
  


.sidebar-header 
  padding: 20px;
  background-color: #1CA4FC;


.sidebar-footer 
  padding: 20px;
  background-color: #65D643;


.site-content 
  padding: 20px;
  background-color: #F7B92B;
  width: calc(100%);

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

如何为 flexbox 排序如上图所示的移动设备创建流畅的布局？

【问题讨论】：

你不能不使用 JS 克隆/移动站点内容。这三个部分需要是兄弟，然后您可以通过order 更改顺序。不过，你可以用浮点数更好地解决这个问题。页眉和页脚向左浮动，内容向右浮动。不过，仍然需要有相同的父级。

请注意，如果有一天display:contents 无处不在，这些结构将不再是麻烦制造者。 （在 Firefox 中测试：codepen.io/gc-nomade/pen/borJaY）。还有可以和flex模型切换的grid模型。 codepen.io/gc-nomade/pen/yzorEQ (sidebar-wrapper 就不再需要了。

【参考方案1】：

鉴于div 结构，我会这样做：

.container 
  background-color: red;
  display: flex;
  flex-direction: column;


.sidebar-header 
  padding: 20px;
  background-color: #1ca4fc;


.sidebar-footer 
  padding: 20px;
  background-color: #65d643;


.site-content-mobile 
  padding: 20px;
  background-color: #f7b92b;


.site-content 
  display: none;


@media (min-width: 787px) 
  .container 
    flex-direction: row;
  
  .site-content-mobile 
    display: none;
  
  .site-content 
    display: block;
    width: calc(100%);
    padding: 20px;
    background-color: #f7b92b;
  

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="site-content-mobile">
      Site Content
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

【讨论】：

谢谢 :) 你太棒了。这正是我正在寻找的！干杯！！

没问题 :) 我很高兴它有帮助。

【参考方案2】：

您可以在flex 和grid 之间切换，避免使用额外的.sidebar-wrapper。

.container 
  background-color: red;
  display: flex;
  flex-direction: column;


@media only screen and (min-width: 600px) 
  .sidebar-wrapper 
    display: block;
    width: 264px;
  
  .container 
    display: grid;
    grid-template-columns: 264px 1fr;
  


.sidebar-header 
  padding: 20px;
  background-color: #1ca4fc;


.sidebar-footer 
  padding: 20px;
  order: 2;
  background-color: #65d643;


.site-content 
  padding: 20px;
  background-color: #f7b92b;
  flex: 1;
  order: 1;
  grid-row: auto / span 2

<div class="container">
  <div class="sidebar-header">
    Sidebar Header
  </div>
  <div class="sidebar-footer">
    Sidebar Footer
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

https://codepen.io/gc-nomade/pen/yzorEQ

---

如果不修改结构，display:contents; 会很有用（此时，Firefox 理解它 - 使用 FF 来测试预期的结果:()。

这些元素本身不会产生特定的框。它们被它们的伪盒子和它们的子盒子取代。

.container 
  background-color: red;
  display: flex;
  flex-direction: column;


.sidebar-wrapper 
  display: contents;
  width: 264px;


@media only screen and (min-width: 650px) 
  .sidebar-wrapper 
    display: block;
    width: 264px;
  
  .container 
    flex-direction: row;
  


.sidebar-header 
  padding: 20px;
  background-color: #1ca4fc;
  order: 2;


.sidebar-footer 
  padding: 20px;
  background-color: #65d643;


.site-content 
  padding: 20px;
  background-color: #f7b92b;
  flex: 1;
  order: 1;

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar-header">
      Sidebar Header
    </div>
    <div class="sidebar-footer">
      Sidebar Footer
    </div>
  </div>
  <div class="site-content">
    Site Content
  </div>
</div>

https://codepen.io/gc-nomade/pen/borJaY

---

注意：媒体查询通常是包装选择器集，而不是嵌套在选择器本身中。

【讨论】：

第一个解决方案看起来更简洁，并且我认为受到浏览器的广泛支持。但是，Site Header、Site Footer div 的排列顺序相反。

@TaherJodhpurwala 哦，是的，订单规则放错了位置。我也会选择第一个，可能会使用页眉/页脚和主标签。 display-box contents 看起来很方便，希望有一天能得到广泛的支持。