Как равномерно распределить высоту ячеек в Foundation XY-grid (flexbox) - PullRequest
Новая
       34

Как равномерно распределить высоту ячеек в Foundation XY-grid (flexbox)

0 голосов
/ 15 июня 2019

Используя базовую XY-сетку и, в частности, вложенную grid-y внутри ячейки, я хочу использовать класс .auto в родительской ячейке для равномерного распределения высоты ячейки, в случае grid-y с 2 ячейками.это будет 50% / 50%.

Это прекрасно работает, если содержание ячейки сетки-y достаточно низкое, чтобы поместиться внутри ячейки, не сдвигая границы.Однако, если содержимое выше, оно обрезается.

Обходной путь для этого состоит в том, чтобы установить для flex-based для класса .auto значение «auto» вместо «0px», которое является предопределенным значением в Foundation css..

Это прекрасно работает, если содержимое достаточно велико, чтобы раздвинуть границу ячейки, но если оно меньше, то высота родительской ячейки распределяется неравномерно.

Примечание: использование«.grid-y» в каждой ячейке должен иметь возможность располагать содержимое центра ячейки вертикально.См. Вертикальное выравнивание содержимого внутри ячейки XY-Grid 

<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

1 Ответ

0 голосов
/ 17 июня 2019

Поскольку сетка уже использует 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>
...