php - 如何使用flexbox布局多列？

Question

我正在尝试按以下方式布置多列。我正在使用 Wordpress，但正在编辑 PHP、HTML、CSS 等。

这是 HTML。将 A B C 想象成没有固定高度和百分比宽度的代码块，如图所示。

<div class="flex wrap">
     <div class="main">A</div>
     <div class="optional">B</div>
     <div class="main2">C</div>
</div>

只要我在使用 flexbox，我就可以使用视口(viewport)来改变 flex 的顺序。但现在我无法获得所需的桌面布局。

我可以使用带有嵌套 div 的列(bootstrap)作为第二列来创建桌面布局，但移动布局将是 BAC 或 ACB 而不是 ABC。

这是我的 CSS:

.flex.wrap {
    flex-wrap: wrap;
}

.flex {
    display: flex!important; /* to override display:block */
}

.main {
    order: 2;
    flex: 0 75%;
}

.optional {
    order: 1;
    flex: 0 25%;
}
.main2 {
    order: 3;
    flex: 0 75%
}

我做了我的研究，看到很多这样的问题被问到，但没有满足我需要的满意答案。

我不必使用 flex box，也不需要纯 css 解决方案 - 只要它可以在大多数现代浏览器和移动设备上运行即可。我只需要有用的东西。所以我愿意接受任何建议。

我也可以在两个代码块上使用 display: none 但这会使代码增加 67 行，我认为这是不必要的。

即使有一个可能像下面这样工作的 php 解决方案，它也可能会工作。

If (code that determines mobile viewport) echo html
else
echo nothing

还有另一个相同的代码用于我希望桌面版本所在的位置。我知道这并不优雅，但最后我关心的是结果，包括性能，而不是其他任何东西。

任何帮助将不胜感激。

Answer 1

因为你不能设置固定的高度，Flexbox 不能单独做到这一点，所以你要么将它与定位或脚本结合起来，要么使用 CSS Grid(它的浏览器支持比 Flexbox 少)。

这是一个使用定位的示例，并更新了原始代码示例中的类，以使其更易于理解。

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
}
.flex {
  display: flex;
  flex-direction: column;
}
.flex > div {
  border: 1px solid;
  box-sizing: border-box;
}

/*  for desktop  */
@media screen and (min-width: 600px) {
  .flex > .optional {
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 100%;
  }
  .flex .main,
  .flex .main2 {
    margin-left: 25%;    /*  match the width of the "optinal"  */
  }
}

<div class="wrapper">
  <div class="flex">
    <div class="main">A</div>
    <div class="optional">B</div>
    <div class="main2">C</div>
  </div>
</div>

---

已更新

在某些情况下，我们根本无法使用绝对定位，例如，当左右两列(在桌面模式下)可能超出另一列时。

这是一个使用小脚本的版本，它模仿媒体查询并将 optional 元素移入和移出 flex 容器。

它还在 body 上切换一个类，在本例中为 mobileview，它在 CSS 中用于切换 wrapper 作为flex 容器并在 optional 上设置适当的属性，当它是 wrapper 而不是 flex 的 flex 元素子项时。

通过脚本中的 minwidth = 600 变量，可以控制布局切换的宽度。

这是一个fiddle demo也可以一起玩

(function(d, w, timeout) {

  /* custom variables */
  var flexcontainer = '.flex',
    flexitem = '.optional',
    minwidth = 600,             /* if null, then when viewport is portrait */
    classname = 'mobileview';
    
  /* here happens the magic */
  function resizeing() {
    if ((minwidth && (minwidth < w.innerWidth)) ||
        (!minwidth && (w.innerHeight < w.innerWidth))) {
      if (!(d.body.classList.contains(classname))) {
        /* move it outside the main flexcontainer */
        d.body.classList.add(classname);
        var fca = qSA(flexcontainer);
        for (var i = 0; i < fca.length; i++) {
          fca[i].parentNode.appendChild(qS(flexitem, fca[i]))
        }
      }
    } else {
      if (d.body.classList.contains(classname)) {      
        /* move it back inside the main flexcontainer */
        d.body.classList.remove(classname)
        var fca = qSA(flexcontainer);
        for (var i = 0; i < fca.length; i++) {
          fca[i].appendChild(qS(flexitem, fca[i].parentNode))
        }
      }      
    }
  }
  
  /* run at page load init resize */
  w.addEventListener("load", function() {
    resizeing();
  }, false);
  
  /* grab when viewport resize */
  w.addEventListener("resize", function() {
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        resizeing();
      }, 66);
    }
  }, false);
  
  /* helper variables */
  var qSA = function(s, el) {
      return (el) ? el.querySelectorAll(s) :
        d.querySelectorAll(s)
    },
    qS = function(s, el) {
      return (el) ? el.querySelector(s) :
        d.querySelector(s)
    };
}(document, window));

html, body {
  margin: 0;
}
.wrapper .flex {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.wrapper .flex > div {
  flex-grow: 1;
  border: 1px solid;
  box-sizing: border-box;
}
.wrapper .flex .optional {
  order: 1;
}
.wrapper .flex .main2 {
  order: 2;
}

/*  for desktop  */
.mobileview .wrapper {
  display: flex;
}
.mobileview .wrapper .optional {
  flex-basis: 25%;
  order: -1;
  border: 1px solid;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="flex">
    <div class="main">A</div>
    <div class="optional">
      B as a lot more content<br>
      B as a lot more content<br>
      B as a lot more content<br>
      B as a lot more content<br>
      B as a lot more content<br>
    </div>
    <div class="main2">C</div>
  </div>
</div>

<h5>More than one container and other text etc.</h5>

<div class="wrapper">
  <div class="flex">
    <div class="main">
      A as a lot more content<br>
      A as a lot more content<br>
      A as a lot more content<br>
      A as a lot more content<br>
      A as a lot more content<br>
    </div>
    <div class="optional">B</div>
    <div class="main2">C</div>
  </div>
</div>