0

我正在尝试使用以下设计为自己构建一个 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下left移动（< 800px 或示例）？

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

4

3 回答 3

3

你想要的布局无法用 flexbox 实现。原因在这里解释：

但是，使用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 演示

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

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

浏览器对 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

于 2017-05-18T15:45:12.160 回答
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>

于 2017-05-18T15:33:48.070 回答
0

可能是更改 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>

它应该工作。

于 2017-05-18T15:13:09.440 回答