CSS之FFC/GFC

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規範。