0

我正在使用带有 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 我通过使用设置 flex-container 的高度windowHeight = $(window).innerHeight();

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

  1. small-6 cell宽度为 50%，未得到尊重，并缩小到文本的大约长度。
  2. flex-container不像grid-container没有宽度或填充。

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

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

因此，虽然我已经修复了这个问题，但我不禁认为必须有一种更简单的方法，一种只使用类的正确方法。设置 grid-container 这样做似乎很奇怪，但 flex-container 没有。

4

1 回答 1

2

这里的主要问题是，flex-container元素grid-x作为它自己的弹性容器，也将成为弹性行项目，具有默认flex项目值0 1 auto。

这意味着grid-x不会比它的内容更宽，因此width: 50%不会在它的孩子（small-6）上工作，因为他们的父母没有设置宽度。

通过向元素添加 egflex-child-grow或，它将填充其父元素的宽度，并且内部 flex 项将开始按预期运行。cellgrid-x

注意 1：grid-container不需要 this，因为它不是 flex 容器，其中grid-x是正常的div，显示为flex，它与block元素一样，默认情况下采用其父元素的全宽。

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

堆栈片段

/*  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>

于 2018-01-11T19:55:19.500 回答