CSS之FFC/GFC

wemall 发布于2019-08-29 17:29 / 547人阅读

摘要：全称翻译过来就是弹性格式化上下文。产生条件属性值设置为为或者的容器布局规则的布局规则在中也有详细定义，上可以找到详细说明，。通常弹性布局使用，二维网格布局使用。最后，所有的与也是一个，在遵循自己的规范的情况下，向下兼容规范。

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; }

当然我们通过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; }

通过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;
}

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

最后总结

FFC能做的事情，通过GFC都能搞定，反过来GFC能做的事通过FFC也能实现。
通常弹性布局使用FFC，二维网格布局使用GFC。
最后，所有的FFC与GFC也是一个BFC，在遵循自己的规范的情况下，向下兼容BFC规范。

云服务器 GPU云服务器之字形系列之香江之无限梦之天翼

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114356.html

CSS之BFC

摘要：比如说最常见的块级元素内联元素文档模型层叠样式模型盒子模型等，但还有一种规范经常会被排除在规范的认知之外。属于同一个的两个相邻的会发生重叠。计算的高度时，浮动元素也参与计算。垂直方向的距离由决定，利用这一点可以解决塌陷问题。对于很多初学者来说，CSS是不讲道理的，但是如果去深究，会发现其实CSS是有一定道理的。比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等...

Jinkey 2019-08-29 17:27 评论0 收藏0
扯点：FC - Formatting Context

摘要：指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。两个同胞盒间的垂直距离取决于属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 FC（Formatting Context）指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。常见的FC有BFC、IFC，GFC和FFC。 BF...

notebin 2019-08-29 14:11 评论0 收藏0
深入css布局 (1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

ky0ncheng 2019-04-23 13:43 评论0 收藏0
深入css布局(1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

blankyao 2019-08-29 15:25 评论0 收藏0
CSS入门之引用、选择器、属性（六分之三）

摘要：入门教程六分之三篇没办法，我直播教小伙伴入门，属性讲完，准备说定位的时候，他们就喊停，不住了。。。选择器表达式如下相关效果见表达式关键词特性属性属性即样式定制的具体样式，比如定制宽高，分别为与等。 CSS 入门教程六分之三篇没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333 要点解释引用如...

baishancloud 2019-08-30 15:54 评论0 收藏0