Zurb Foundation 6 XY网格在Flex-Container中使用网格容器-Java 学习之路

我正在使用带有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％，未被遵守，缩小到文本的大约 .
与 grid-container 不同的
flex-container 没有宽度或填充 .

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

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

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

1 回答

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

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

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

注1：对于 grid-container ，这不是必需的，因为它不是一个弹性容器，其中 grid-x 是一个普通的 div ，显示为 flex ，它与 block 元素一样，默认采用其父级的全宽 .

注意2： flex-container 和 grid-container 的默认宽度都是100％，当它是一个弹性项目时，它是 grid-x ，导致问题默认情况下没有取其父级的宽度 .

堆栈代码段
```
/*  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>
```
回复于 2024-04-29T11:41:52+08:00

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

1 回答

相关问题