CSS之FFC/GFC

栏目: CSS · 发布时间: 7年前

内容简介：FFC的布局规则与在CSS中有详细定义，关于FFC是如何布局的，看阮一峰的这篇文章即可:在这篇文章之外额外需要注意的是：FFC布局中，float、clear、vertical-align属性不会生效。GFC全称“GridLayout Formatting Contexts”翻译过来就是“块级格式化上下文”。

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>

CSS之FFC/GFC 当然我们通过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>

CSS之FFC/GFC 通过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>

CSS之FFC/GFC 用GFC可以轻松实现自由拼接效果话，换成其他方法，一般会使用相对/绝对定位，或者flex来实现自由拼接效果，复杂程度将会提升好几个等级。

最后总结

FFC能做的事情，通过GFC都能搞定，反过来GFC能做的事通过FFC也能实现。

通常弹性布局使用FFC，二维网格布局使用GFC。

最后，所有的FFC与GFC也是一个BFC，在遵循自己的规范的情况下，向下兼容BFC规范。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

CSS之FFC/GFC

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

叠加体验：用互联网思维设计商业模式

穆胜 / 机械工业出版社 / 2014-11 / 39.00

本书在互联网思维改变一切的背景下，详细介绍了如何运用互联网思维重构商业模式，主要包括以下内容：①互联网经济中的商业逻辑（即“互联网思维”），不仅给出了消费方面的逻辑变革，还给出了在生产端的逻辑变革以及“跨界”的逻辑变革。②给出了一个“三层产品体验模型”，厘清了互联网思维，打造完美终端、云端服务和价值群落三层体验，企业可以选择做不同层面的体验组合，这即是选择了不同的市场策略。但是，企业要基业长青，终......一起来看看《叠加体验：用互联网思维设计商业模式》这本书的介绍吧!

码农工具