如何獲得Zurb基金會的flexbox類的工作？

我正在使用Foundation 6並希望將Flexbox類應用於行和列，如文檔here中所述。如何獲得Zurb基金會的flexbox類的工作？

我的HTML看起來像：

<div class="row header align-middle"> 
    <div class="large-5 columns"> 
    <div class="header__title"> 
     <h1>Title</h1> 
    </div> 
    </div> 
    <div class="large-7 columns search-form"> 
    <form>etc</form> 
    </div> 
</div>

，但我在這裏什麼也得不到。我也嘗試使用該列元素align-self-middle類，沒有影響，如：

<div class="large-7 columns search-form align-self-middle">

，並試圖兩者的結合。

在我做檢查看到一些風格正在從framework.css應用，如：

.align-middle { 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
}

會有人知道我需要得到這個工作？

來源

2017-03-01 MeltingDog

什麼是你期待發生什麼？如果你在SO上發佈了你的帖子中的問題演示，那麼我們可以告訴你它是否適合你。順便說一句，「align-items：center;'在'flex-direction：row;'佈局中垂直對齊內容，並且'.align-self-middle'元素垂直對齊中心http://codepen.io/anon/pen/bqVJGX –

如果您使用的是scss版本，請在app.scss中包含以下內容。

// @include foundation-grid; 
@include foundation-flex-grid; 

//@include foundation-float-classes; 
@include foundation-flex-classes;

註釋掉foundation-grid & foundation-float-classes並取消foundation-flex-grid & foundation-flex-classes

來源

2017-03-01 09:22:29

謝謝。但爲什麼註釋掉其他文件？ – MeltingDog

@MeltingDog如果您使用flex類，則不需要浮點類。 –

如何獲得Zurb基金會的flexbox類的工作？

回答

相關問題