Zurb Foundation 6 XY Grid 在 Flex-Container 中使用 Grid Container

Question

我正在使用带 XY 网格的 ZURB foundation 6，运行遇到了一个小问题，很可能是我做错了什么。

我想使元素垂直居中，所以我使用

<div class="flex-container">
    <div class="grid-x grid-padding-x align-middle">
      <div class="small-6 cell">Vertically Centered Left Column</div>
      <div class="small-6 cell">Vertically Centered Left Column</div>
    </div>
</div>

并使用 jQuery 我使用 windowHeight = $(window).innerHeight();

设置 flex-container 的高度

瞧，这些项目是垂直对齐的...但是，由此产生了两个问题：

small-6 cell 有 50% 的宽度未被遵守并缩小到文本的大约长度。
flex-container 不像 grid-container 没有宽度或填充。

为了解决这个问题，我添加了一些 CSS，如下所示：

.flex-container .align-middle {
    max-width: 62.5rem;
    margin: 0 auto;
    width: 100%;
}

因此，虽然我已经解决了这个问题，但我还是忍不住想一定有更简单的方法，一种只使用类的正确方法。 grid-container 设置为这样做似乎很奇怪，但 flex-container 不是。

Answer 1

这里的主要问题是对于 flex-container，grid-x 元素将作为其自身的 flex 容器，同时成为 flex row 项，具有默认的 flex 项值 0 1 auto。

这意味着 grid-x 不会变得比它的内容更宽，因此 width: 50% 不会在其 children (small-6) 上工作，因为它们的 parent 没有设置宽度。

通过添加例如flex-child-grow 或 cell 到 grid-x 元素，它将填充其 parent 的宽度，内部弹性项目将开始按预期运行。

注意 1：使用 grid-container 时不需要，因为它不是 flex 容器，其中 grid-x 是正常的 div，显示为 flex，它和 block 元素一样，默认占据其 parent.

的全宽

注意 2：flex-container 和 grid-container 都具有默认宽度 100%，它是 grid-x，当它是弹性项目时，导致问题默认情况下不采用其 parent 的宽度。

堆栈片段

/*  for demo purpose  */ 
body            { margin: 0; }
.flex-container { height: 100vh; }
.grid-x         { border: 1px solid red; }
.small-6        { border: 1px solid blue; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>

<div class="flex-container">
    <div class="flex-child-grow grid-x grid-padding-x align-middle">
      <div class="small-6 cell">Vertically Centered Left Column</div>
      <div class="small-6 cell">Vertically Centered Left Column</div>
    </div>
</div>

Zurb Foundation 6 XY Grid 在 Flex-Container 中使用 Grid Container

Zurb Foundation 6 XY Grid using Grid Container within Flex-Container

html

css

flexbox

zurb-foundation-6

xy-grid