Flex-boxとFoundation 6で早くグリッドを終了する

Question

フレックスグリッドを使用して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>を別のコンテナに入れた方がよいでしょう。今のところ表示が適用されます：セクションにはフレックスがあり、すべての直接の子供はフレックスの子供になるため、デフォルトでは横に並んでいます。

Example

また、あなたはあなたがそれらを中央しようとしている場合は、列をオフセットする必要はありません。行の.align-centerクラスがそれを行うことができます。