如何解决 Foundation Sites v6.5.3 中的 XY-Grid 响应式行为挑战

Question

我是 Zurb Foundation 的新手，但很喜欢学习这个新框架。它取代了我多年来一直使用的旧主力，似乎可以满足我的所有需求。

不幸的是，有一个响应式 header 我正在尝试为一个网站执行，但我无法理解如何在新的 XY-Grid 中实现它。我有点接近了，尽管在小断点处的橙色块完全失败了:(

我非常感谢一些建议。

谢谢，边先生

由于 xy-grid 清除行且不支持浮动，我未能将红色元素塞入大尺寸的橙色和蓝色下方（但可以通过负边距破解它）。刚接触 Foundation 和 flex 没有帮助:(

<div class="grid-x align-right">
    <div class="cell small-5 medium-4 large-3" style="background-color:green;">
        GREEN
    </div>
    <div class="cell small-7 medium-8 large-9">
        <div class="grid-x">
            <div class="cell medium-12 large-7" style="background-color:orange;">
            <!-- Does not yet move above GREEN at small -->
                ORANGE
            </div>
            <div class="cell small-12 medium-12 large-5" style="background-color:blue;">
                BLUE
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-12 large-9" style="background-color:red;">
        <!--Negative margin set at LARGE breakpoint (not a good solution)-->
        RED
    </div>
</div>

我已经制作了我想要实现的目标的图像，但无法包含它，因为我没有 10+ 的声誉。也许这个 link 会被允许：https://i.imgur.com/TBSWGZr.png

Answer 1

据我了解，flexbox 的设计初衷并不是为了满足您的需求。我相信这将是 grid 而不是 flexbox.

的用例

如果您真的想坚持使用默认值类并使用 Foundation，那么根据您提供的图像 this is the best I could get it (codepen)。你的 HTML 在顶部，我的在底部，因此我们可以看到断点处行为的直接比较。

我敢肯定，比我更聪明的人可能会看到不同的解决方案，在这种情况下，我真的很想看看它！

<div class="grid-x">
  <div class="orange cell small-12 medium-9 medium-order-2 large-4 large-order-2">
    ORANGE
  </div>
  <div class="green cell small-6 medium-3 medium-order-1 large-4 large-order-1">
    <p>GREEN</p>
    <p>content</p>
  </div>
  <div class="blue cell small-6 medium-9 medium-offset-3 medium-order-3 large-4 large-offset-0 large-order-3">
    BLUE
  </div>
  <div class="red cell small-12 medium-12 medium-order-4 large-8 large-order-4 large-offset-4">
    RED
  </div>
</div>

如您所见，当向每个 div 添加更多内容时，它会将整个 'row' 内容下推，因此它们都占据了 space 的 100% 高度.

这是网格的用武之地，如果您将它与断点一起使用，那么您将能够围绕您拥有的 space 移动元素。

Here's a great guide to using grid.

如何解决 Foundation Sites v6.5.3 中的 XY-Grid 响应式行为挑战

How to solve XY-Grid responsive behaviour challenge in Foundation Sites v6.5.3

zurb-foundation

xy-grid