Question

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

只要网格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>

如何在Foundation XY网格（flexbox）中均匀分配像元高度

1 个答案: