标签 CSS 下的文章

Flexbox已经得到主流浏览器较新版本的广泛支持。对于某些需要兼容的旧版本浏览器,只要调整一下语法或提供商前缀,基本上也没问题。

两套属性

Flexbox有两套属性,一套针对可伸缩容器(flexible container),一套针对容器的直接子元素,或可伸缩项(flexible item)。

Flex容器,即应用display:flex;display: inline-flex规则的元素,可以接受如下属性:

  • flex-direction:指定主轴方向是水平还是垂直
  • flex-wrap:指定可伸缩项是否折行
  • flex-flow:以上两个属性的简写形式
  • justify-content:指定可伸缩项在主轴方向上的对齐方式
  • align-items:指定可伸缩项在辅轴方向上的对齐方式
  • align-content:指定多行可伸缩项在辅轴方向上的对齐方式

容器的直接子元素或者可伸缩项,可以接受如下属性:

  • flex-grow:指定当前项如何扩展
  • flex-shrink:指定当前项如何收缩
  • flex-basis:指定分配剩余空间之前当前项的初始大小
  • flex:以上三个属性的简写形式
  • order:指定当前项在容器中出现的次序

针对容器的属性非常容易理解,而针对可伸缩项的属性则不好理解。更确切地说,是flex-growflex-shrinkflex-basis属性不好理解。只有理解了这三个属性,你才能说自己真正理解了Flexbox。

- 阅读剩余部分 -

简单地说,就是从CSS3开始,CSS规范就被拆成众多模块(module)单独进行升级,或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更,有的只是CSS某个模块级别的跃迁。

引入模块化之前

按照CSS工作组的说法,CSS历史上并没有版本的概念,有的只是“级别”(level)的概念。比如,CSS3其实是CSS Level 3,CSS2是CSS Level 2,而CSS Level 1当然就是CSS1。每个级别都以上一个级别为基础。

大家都知道,CSS1早就作废了。CSS2其实基本上也已经作废了。但是,CSS1、CSS2(以及CSS2.1)在当时都是一个大而全的规范。而且,CSS2在成为最终标准的时候,W3C规范的流程里还没有定义CR这个阶段。

后来,W3C进一步完善了规范制定流程,要求每个规范都要经过以下五个阶段:

  1. 工作草案(WD,Working Draft)
  2. 最终工作草案(LC/LCWD,Last Call Working Draft)
  3. 候选推荐(CR,Candidate Recommendation)
  4. 提议推荐(PR,Proposed Recommendation)
  5. 推荐标准(REC,Recommendation)

由于当初CSS2并没经过CR阶段,因此出现了很多问题。CSS工作组被无穷无尽的“改bug”搞得不厌其烦。结果,他们决定对CSS2进行一次修订,这就是CSS2.1(CSS Level 2 Revision 1)。换句话说,CSS2.1其实只是CSS2的一个修订版,并没有实质性变化。有些CSS2中的内容,CSS工作组认为不够成熟,于是从CSS2.1中删除了。这些删除的内容被视为回退到流程的CR阶段——相当于需要“回炉”。(后来,这些内容基本都以CSS模块的方式,经过修订和增补,进入了CSS Level 3。)

CSS2.1及之前的CSS规范把所有内容都写在一个文档里。随着CSS特性越来越多,越来越复杂,CSS规范的篇幅也越来越长。CSS2.1的PDF版有430页(https://www.w3.org/TR/CSS2/css2.pdf)。这就给勘误和进一步升级带来了极大不便。因为文档不同部分升级的进度不可能强求一致。

于是,CSS工作组决定从CSS2.1之后开始采取模块化的路线。就是把需要升级的内容独立成模块拆分出来,新增的需求也以新模块的方式立项。从此以后,CSS就进入了Level 3。

- 阅读剩余部分 -