css 中的 bfc(Block Formatting Contexts)

常见定位方案

在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:

  • 普通流 (normal flow)

在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。

阅读更多

Flex 布局教程:实例篇

[[Flex 布局教程:语法篇]] 介绍了Flex布局的语法,今天介绍常见布局的Flex写法。

你会看到,不管是什么布局,Flex往往都可以几行命令搞定。


我只列出代码,详细的语法解释请查阅 [[Flex 布局教程:语法篇]]。我的主要参考资料是 Landon Schropp 的文章和 Solved by Flexbox

阅读更多

Flex 布局教程:语法篇

网页布局(layout)是 CSS 的一个重点应用。


布局的传统解决方案,基于 盒状模型 ,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如, 垂直居中 就不容易实现。


2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。


Flex 布局将成为未来布局的首选方案。本文介绍它的语法, 下一篇文章 给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo ,也可以参考。

以下内容主要参考了下面两篇文章: A Complete Guide to FlexboxA Visual Guide to CSS3 Flexbox Properties

阅读更多