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

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

码农书籍

Mastering Regular Expressions, Second Edition

Jeffrey E F Friedl / O'Reilly Media / 2002-07-15 / USD 39.95

Regular expressions are an extremely powerful tool for manipulating text and data. They have spread like wildfire in recent years, now offered as standard features in Perl, Java, VB.NET and C# (and an......一起来看看《Mastering Regular Expressions, Second Edition》这本书的介绍吧!

码农工具