FFC
FFC全稱“Flex Formatting Contexts”翻譯過來就是“彈性格式化上下文”。
FFC產生條件
- display屬性值設置爲“flex”或“inline-flex”的容器。
FFC佈局規則
FFC的佈局規則與在CSS中有詳細定義,關於FFC是如何佈局的,看阮一峯的這篇文章即可: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
在這篇文章之外額外需要注意的是:FFC佈局中,float、clear、vertical-align屬性不會生效。
GFC
GFC全稱“GridLayout Formatting Contexts”翻譯過來就是“塊級格式化上下文”。
GFC產生條件
- display屬性值設置爲爲“grid”或者“inline-grid”的容器
GFC佈局規則
GFC的佈局規則在CSS中也有詳細定義,MDN上可以找到詳細說明,https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout。
接下來看幾個例子,明白GFC的妙用
經典頁面網格佈局
.warp {
height: 100%;
display: grid;
grid-template-columns: 200px calc(100% - 205px);
grid-template-rows: 100px calc(100% - 170px) 60px;
grid-gap: 5px;
}
.warp div { border: 1px solid aquamarine; }
.warp .g-1 { grid-column-start: 1; grid-column-end: 3; }
.warp .g-4 { grid-column-start: 1; grid-column-end: 3; }
<div class="warp">
<div class="g-1"></div>
<div class="g-2"></div>
<div class="g-3"></div>
<div class="g-4"></div>
</div>
當然我們通過float或者flex也是可以達到相同的效果,但代碼量和複雜程度相對於GFC來說會更多一些。
實現排列效果
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-column-gap: 2px;
grid-row-gap: 2px;
width: 400px;
}
.list div { height: 50px; border: 1px solid grey; }
<div class="list">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
通過GFC控制排列,代碼量也非常的少,也很容易理解。
任意魔方拼接
.cube {
display: grid;
grid-gap: 2px;
width: 300px; height: 300px;
}
.cube div { border: 1px solid grey; }
.cube .g-1 { grid-column-start: 1; grid-column-end: 3; }
.cube .g-3 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
<div class="cube">
<div class="g-1"></div>
<div class="g-2"></div>
<div class="g-3"></div>
<div class="g-4"></div>
<div class="g-5"></div>
<div class="g-6"></div>
<div class="g-7"></div>
</div>
用GFC可以輕鬆實現自由拼接效果話,換成其他方法,一般會使用相對/絕對定位,或者flex來實現自由拼接效果,複雜程度將會提升好幾個等級。
最後總結
FFC能做的事情,通過GFC都能搞定,反過來GFC能做的事通過FFC也能實現。
通常彈性佈局使用FFC,二維網格佈局使用GFC。
最後,所有的FFC與GFC也是一個BFC,在遵循自己的規範的情況下,向下兼容BFC規範。