Блог

Я делал учебник здесь: https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6 и пробовал растягиваться здесь:

https://codepen.io/chrisoncode/pen/wMWEVE

     <p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
    <div class="columns">space</div>
    <div class="columns">
      <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
    </div>
</div>

body          { padding-top:50px; }
.row          { border:1px solid #FF556C; margin-bottom:20px; }
.columns      { background:#048CB9; color:#FFF; padding:20px; }
.columns:first-child { background:#085A78;vertical-align:bottom }
.columns:last-child  { background:#B3BBBB; }
  

В 3-м примере, используя свойство stretch, я пытаюсь выровнять текст по вертикали посередине, и мне не повезло. Кто-нибудь может сказать мне, как это сделать?

Я попытался добавить .columns:first-child { background:#085A78;vertical-align:bottom }, но это не сработало.

HTML:

 <p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
  <div class="columns">
    <div class="row align-center text-center"><p>space</p></div>
  </div>
  <div class="columns">
    <p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
  </div>
</div>
  

CSS:

 div.row.align-stretch.text-center .columns {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.row.align-stretch.text-center .columns p {
  margin: 0;
}
  

Дочерние элементы Flex имеют одинаковую высоту по умолчанию, если только вы не присвоите элементам выравнивания значение, отличное от stretch .

Для этого:

 <div class="row align-stretch text-center">
  

Такое же, как:

 <div class="row text-center">
  

Для вашего примера самый простой способ — использовать .align-middle which сделает столбец высотой содержимого внутри и центрирует его по вертикали по более высокому столбцу в группе.

В противном случае вы можете создать сам столбец display: flex; и добавить align-items: center;