1

使用 Foundation XY-grid，特别是单元格内的嵌套 grid-y，我想在父单元格上使用 .auto 类来均匀分布单元格高度，对于带有 2 个单元格的 grid-y 来说50%/50%。

只要 grid-y 单元格内容足够低以适合单元格内部而不会推动边框，这就可以正常工作。但是，如果内容较高，则会裁剪内容。

解决方法是将类 .auto 的 flex-basis 设置为“auto”，而不是 Foundation css 中的预定义值“0px”。

只要内容足够高以推动单元格边框，这就可以正常工作，但如果它更小，则父单元格高度不会均匀分布。

旁注：在每个单元格上使用“.grid-y”是为了能够垂直定位单元格中心的内容。请参阅： 垂直对齐 XY-Grid Cell 内的内容

<div class="grid-container">
<div class="grid-x">
    <div class="cell medium-6 grid-y align-middle align-center" style="background:green;">
        <div style="background: blue; height: 300px">
            Element A
        </div>
        <div style="background: violet; height: 300px">
            Element B
        </div>
    </div>
    <div class="cell medium-6 grid-y align-middle align-center" style="background:red;">
        <!-- Nested Grid -->
        <div class="grid-y" style="min-height: 100%; width: 100%;">
                <div class="cell auto grid-y align-middle align-center" style="background:yellowgreen;">
                    <div style="background: yellow; height: 50px">
                        Element C
                    </div>
                    <div style="background: gray; height: 50px">
                        Element D
                    </div>
                </div>
                <div class="cell auto grid-y align-middle align-center" style="background:darkcyan;">
                    <div style="background: yellow; height: 70px">
                        Element E
                    </div>
                    <div style="background: gray; height: 70px">
                        Element F
                    </div>
                </div>
        </div>
    </div>
</div>
</div>

修改后的 CSS：

.grid-y > .cell.auto {
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 auto;
 -ms-flex: 1 1 auto;
 flex: 1 1 auto;
}

而不是 Foundation 原始代码：

flex: 1 1 0px
4

1 回答 1

0

因为网格已经在使用 Flexbox，您可以通过使单元格也显示 flex 来设置水平网格和等高单元格。

示例：https ://codepen.io/rafibomb/pen/wLWKXL

<div class="grid-x">
   <div class="cell flex-container auto">
      <img src="http://placehold.it/20" alt="">
   </div>
      <div class="cell flex-container auto">
        <img src="http://placehold.it/50" alt="">
      </div>
     <div class="cell flex-container auto">
       <img src="http://placehold.it/700" alt="">
     </div>
  </div>
于 2019-06-17T16:07:31.540 回答