如何在Foundation XY-grid（flexbox）中均匀分布单元格高度

Question

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

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

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

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

旁注：在每个单元格上使用“.grid-y”是为了能够垂直定位单元格中心的内容。请参见： Vertically align content inside 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

Answer 1

由于网格已经在使用 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>