使用 Flex-box 和 Foundation 6 提前结束网格

Question

我在尝试使用 Flex-grid 阻止元素加入 Foundation 6 中的部分网格时遇到问题。标记是：

<section>
  <h2>A great headline</h2>
  <p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
  <a href="">Something</a>
</section>

section {
  @include flex-grid-row();
  h2 { @include flex-grid-column(12); text-align: center; }
  p { 
    @include grid-column-offset(3);
    @include flex-grid-column(6);
    text-align: center;
  }
  a {  }
}

我希望 a 标签显示在 p 下方，但是因为 p 只占用 9 列，所以 a 标签加入它。

在标准网格中，您以前可以使用 @include grid-column-end;，但现在显然行不通了。有哪些替代方案？

Answer 1

最好将 <p> 和 <a> 包装在另一个容器中。现在的方式将应用 display: flex 在该部分上，所有直接子项都将是 flex 子项，因此默认并排坐着。

Example

此外，如果您要使列居中，则无需偏移列。行上的.align-centerclass就可以了

使用 Flex-box 和 Foundation 6 提前结束网格

Ending a grid early with Flex-box and Foundation 6

sass

flexbox

zurb-foundation