Question

我正在使用带有XY网格的ZURB基础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的高度

Voila项目是垂直对齐的...但是有两个问题出现了：

small-6 cell的宽度为50％，未被尊重，缩小到文本的大约。

flex-container

grid-container没有宽度或填充。

要解决此问题，我添加了一些CSS，如下所示：

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

因此，当我修补这个问题时，我不禁想到必须有一种更简单的方法，一种只使用类的正确方法。似乎很奇怪，网格容器设置为这样做但flex-container不是。

Answer 1

这里的主要问题是，使用flex-container时，grid-x元素将成为flex 行项目，具有默认flex项值0 1 auto。

这意味着grid-x不会比其内容增长更宽，因此width: 50%将不会对其子项（small-6）起作用，因为它们的父级没有宽度集。

通过添加例如对flex-child-grow元素cell或grid-x，它将填充其父级宽度，内部弹性项将按预期运行。

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

注意2：flex-container和grid-container的默认宽度均为100％，当{flex}项为grid-x时，导致问题不是默认情况下取其父级的宽度。

Stack snippet

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

在Flex-Container中使用网格容器的Zurb Foundation 6 XY网格

1 个答案: