資訊專(zhuān)欄INFORMATION COLUMN
摘要：一行的元素平分整行寬度最重要的一點(diǎn)是給這一行的父元素的直接子元素設(shè)置。指定元素占據(jù)一定的寬度這里我們按照常用的列網(wǎng)格系統(tǒng)來(lái)計(jì)算。第二點(diǎn)是給了一個(gè)輔助類(lèi)。添加類(lèi)，前后兩個(gè)元素就占據(jù)本來(lái)的寬度，而中間那個(gè)元素就會(huì)占據(jù)剩余的寬度。
1. 一行的元素平分整行寬度
Hello WorldHello WorldHello World
.box {
padding: 20px;
border: 1px solid #ffffd;
}
.columns{
display: flex;
}
.column {
flex: 1
}
最重要的一點(diǎn)是給這一行的父元素(columns)的直接子元素(column)設(shè)置flex: 1。這樣元素才會(huì)平分整行空間，否則就只會(huì)占據(jù)元素本身的大小，擠在一起。
2. 指定元素占據(jù)一定的寬度這里我們按照常用的12列網(wǎng)格系統(tǒng)來(lái)計(jì)算。那么我們有以下幾個(gè)需求：
指定元素占據(jù)的列數(shù)
當(dāng)總的列數(shù)加起來(lái)超過(guò)12時(shí)，自動(dòng)切換到下一行
Hello WorldHello WorldHello WorldHello World
.columns{
display: flex;
}
.columns.is-multiline{
flex-wrap: wrap;
}
.column {
flex: 1
}
.column.is-6 {
width: 50%;
flex: none;
}
.column.is-2{
width: 16.66667%;
flex: none;
}
.column.is-10 {
width: 83.333%;
flex:none;
}
這里的重點(diǎn)是給column一個(gè)輔助類(lèi)is-*, is-*的定義一方面通過(guò)百分比指定了寬度，另一方面重要的是設(shè)置了flex:none，否則元素就還是會(huì)采用平分寬度的方法而非指定。
第二點(diǎn)是給了columns一個(gè)輔助類(lèi)is-multiline。is-multiline的作用是設(shè)置了flex-wrap: wrap。如果沒(méi)有這個(gè)屬性，超出12列的寬度之后，這些列就不會(huì)向下走，而是再向右延伸。
3. 元素占據(jù)原本的寬度Hello WorldHello WorldHello World
.columns{
display: flex;
}
.column {
flex: 1
}
.column.is-narrow{
flex:none;
}
這里我們給希望只占據(jù)元素本來(lái)的寬度的column一個(gè)輔助類(lèi)is-narrow。它設(shè)置了flex:none這個(gè)屬性，否則的元三個(gè)元素就會(huì)平分整行的寬度。添加is-narrow類(lèi)，前后兩個(gè)元素就占據(jù)本來(lái)的寬度，而中間那個(gè)元素就會(huì)占據(jù)剩余的寬度。
參考Laracasts
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115536.html
摘要：其設(shè)計(jì)初衷并不是完備的網(wǎng)格系統(tǒng)。所以禁止將其作為一個(gè)完整的網(wǎng)格系統(tǒng)使用。但貓有四條腿，而人類(lèi)只有兩條?？偠灾€是很棒的真的很有用。 對(duì)大部分的人來(lái)說(shuō)（如果你寫(xiě)過(guò)CSS），F(xiàn)lexbox 可以說(shuō)是完美，但它是否適合所有場(chǎng)景呢？ 簡(jiǎn)而言之，我會(huì)給出幾種可用的場(chǎng)景，需要你重新思考 Flexbox 模型的使用。 順便說(shuō)一句，本人是 Flexbox 的忠實(shí)粉絲，曾寫(xiě)過(guò)一篇 Flexbox 詳...
摘要：原文標(biāo)題原文鏈接在網(wǎng)頁(yè)上布局是很費(fèi)勁的。的新值和都是屬性的新值。再一次，很明顯地看到，布局有一些默認(rèn)的行為。在網(wǎng)格布局中我們可以看到相同的效果。在這種情況下，容器的高度由項(xiàng)的最大高度決定。我們可以將項(xiàng)按照列擺放而不是行。 原文標(biāo)題：CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout 原文鏈接：https...
摘要：瀏覽器已經(jīng)宣布將支持標(biāo)準(zhǔn)的語(yǔ)法，但暫未支持。重復(fù)網(wǎng)格區(qū)域的名稱(chēng)導(dǎo)致內(nèi)容擴(kuò)展到這些單元格。點(diǎn)號(hào)表示一個(gè)空單元格。中間一行將由兩個(gè)區(qū)域一個(gè)空單元格和一個(gè)區(qū)域組成。只要這些點(diǎn)號(hào)之間沒(méi)有空格，他們就代表了一個(gè)單一的單元格。 by Chris House 譯者：若愚老師想要更好的閱讀體驗(yàn)可在饑人谷技術(shù)博客 查看原文 CSS 網(wǎng)格布局(Grid Layout) 是CSS中最強(qiáng)大的布局系統(tǒng)。 這是一...
摘要：在過(guò)去的幾個(gè)星期里，我開(kāi)始看到基于的布局框架和柵格系統(tǒng)的出現(xiàn)。你可能傾向于明確給出所有元素的位置，或是盡可能依賴(lài)于自動(dòng)布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過(guò)去的幾個(gè)星期里，我開(kāi)始看到基于 CSS Grid 的布局框架和柵格系統(tǒng)的出現(xiàn)。我們驚訝它為什么出現(xiàn)的這么晚。但除了使用 CSS Gr...
閱讀 5018·2021-11-15 11:39
閱讀 2765·2021-11-11 16:55
閱讀 2262·2021-10-25 09:44
閱讀 3575·2021-09-22 16:02
閱讀 2491·2019-08-30 15:55
閱讀 3190·2019-08-30 13:46
閱讀 2765·2019-08-30 13:15
閱讀 2016·2019-08-30 11:12
