构建 flexbox 网格的问题

Question

我正在尝试使用以下设计为自己构建一个 flexbox：

我的 html 看起来像这样（我不想改变它）：

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

这是 joomla 联系页面的标准布局。我想在不更改 html/php 代码的情况下更改设计。

可以使用 flexbox 吗？

我可以使用 @media 查询使 right_1 - right_4 在移动视图（< 800 像素或示例）上移动到 left 下方吗？

我自己无法让它工作，我总是以 right_1 - right_4 彼此相邻结束，而不是将它们堆叠到左侧部分的总高度。

Answer 1

可能是更改 div 元素顺序的最简单方法，为此您可以使用 Jquery。例如：

$("#element1").before($("#element2"));

最终：

CSS:

#blocks {
    display: box;
    box-orient: vertical;
}
#b1 {
    box-ordinal-group: 2;
}
#b2 {
    box-ordinal-group: 3;
}

HTML:

<div id="blocks">
    <div id="b1">Block 1</div>
    <div id="b2">Block 2</div>
    <div id="b3">Block 3</div>
</div>

应该可以。

Answer 2

这是一种基于现有标记和 CSS Flexbox 的解决方法。

对于桌面视图，left 需要绝对定位，page-header 需要固定高度。

如果您不想设置固定高度，则需要一个脚本来计算高度

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wrapper * {
  padding: 0 10px;
  margin: 0;
  border: 1px solid black;
  box-sizing: border-box;  
}
.page-header {
  height: 70px;
  width: 100%;
  background: red;
}
.right_1, .right_2, .right_3, .right_4 {
  flex: 1;
  width: 50%;
  margin-left: 50%;
  background: lightblue;
}
.left {
  position: absolute;
  left: 0;
  top: 70px;
  width: 50%;
  min-height: calc(100vh - 70px);
  background: yellow;
}
@media only screen and (orientation: portrait) {
  .wrapper * {
    width: 100%;
    margin: 0;
  }
  .left {
    position: static;
    flex: 1;
    min-height: auto;
    order: -1
  }
  .page-header {
    order: -2;
  }
}

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

Answer 3

flexbox无法实现你想要的布局。原因解释如下：

Is it possible for flex items to align tightly to the items above them?

不过CSS Grid布局相对简单。

事实上，使用 Grid 构建布局有多种方法。我将使用 grid-template-areas 属性，它允许您使用 ASCII 艺术来布置元素。

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
     " heading heading "
     "  left_ right1   "
     "  left_ right2   "
     "  left_ right3   "
     "  left_ right4   "
}

.page-header { grid-area: heading; }
.right_1     { grid-area: right1;  }
.right_2     { grid-area: right2;  }
.right_3     { grid-area: right3;  }
.right_4     { grid-area: right4;  }
.left        { grid-area: left_;   } /* "left" is a pre-defined CSS keyword,
                                         so it may not work */
@media ( max-width: 800px ) {
  .wrapper { 
     grid-template-columns: 1fr;
     grid-template-areas: 
        " heading "
        "  left_  "
        "  right1 "
        "  right2 "
        "  right3 "
        "  right4 "
     }
}

/* non-essential decorative styles */
.page-header { background-color: red; }
.right_1     { background-color: chartreuse; }
.right_2     { background-color: aqua; }
.right_3     { background-color: skyblue; }
.right_4     { background-color: black; color: white; }
.left        { background-color: cornsilk; }
body         { margin: 0; }
.wrapper > * {
  font-weight: bold;
  font-size: 1.5em;
  border: 1px solid black;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

jsFiddle demo

本质上，它是这样工作的：

我们用display: grid建立一个块级网格。
grid-template-columns: 1fr 1fr 我们告诉网格创建两列。 fr 单元告诉容器消耗可用的 space。它类似于 flexbox 的 flex-grow 属性。因此，两列将共享容器的整个宽度。
grid-template-areas 属性允许您布置命名的网格区域（您定义的）以使用 ASCII 艺术创建布局的视觉表示。
在较小屏幕的媒体查询中，我们删除一列并对网格区域重新排序。

浏览器支持 CSS 网格

Chrome - 截至 2017 年 3 月 8 日的全面支持（版本 57）
Firefox - 截至 2017 年 3 月 6 日的全面支持（版本 52）
Safari - 截至 2017 年 3 月 26 日的全面支持（版本 10.1）
Edge - 截至 2017 年 10 月 16 日的全面支持（版本 16）
IE11 - 不支持当前规范；支持过时版本

完整图片如下：http://caniuse.com/#search=grid

构建 flexbox 网格的问题

Problems building a flexbox grid

html

css

flexbox

css-grid

jsFiddle demo