再看CSS的Flexbox布局模型

Sun 13 October 2019 / In categories Web

CSS, Flexbox

CSS传统的定式布局,是一种流式布局,目的是为了把一整颗不管多大的DOM树塞进浏览器的视界。另外,定式布局还跟语言的阅读和书写习惯相关联,一般是从左往右从上往下。

定式布局由于其通用性,可以供布局使用的选项比较少。为了实现更精确地布局,CSS提供了其他布局方式,比如Flexblox和Grid。本篇讨论的就是Flexbox(Flexible box),或者直接叫Flex。

把一个元素的display属性设为flex,那么这个元素的子项就可以按照flex的方式来排布。

flex一般应用在元素的内部,而不是像基于inline和block的定式布局那样作用在全局。Flex也是一种单维度的流式布局,不过提供更多控制选项。Grid是双维度的布局。

Flex可以看成是箱体模型的扩展。一个元素具有的内容区域是一个方格,如果看成是一个二维空间,那么排布过程可以从主线轴(main axis)和垂线轴(cross axis)两个方向进行控制。如果主线轴是横向的,那么垂线轴就是竖向的;如果主线轴是竖向的,那么垂线轴就是横向的。不管是横向还是竖向轴,都可以控制其起始点。所以flex的流既可以从左到右,也可以从右到左;更可以从上到下,或者从下往上。

Flex是流式的,通常只沿主线轴列队排布元素,并不折返。但是通过指定flex-wrap则可以在碰到边界的时候折返,重新沿着主线轴起点开始排布。折返的flex可以看作是一个新的flex线轴的开始。由于flex默认的流只有一线轴,那么flex会让这一线轴的元素在垂线轴上处于扩展(stretch)状态,占据所有空间。flex-wrap有多个选项,可以是wrap,也可以是wrap-reverse,这两个选项会影响flex流在垂线轴的排布。

flex-direction和flex-wrap这两个选项可以合并到flex-flow里面。

Display设为flex的元素变为一个flexbox,里面的子元素则变成flexitem。flexitem有自己的特殊属性可以设置,比如:

  • flex-basis:默认为auto,用来设置flexitem的大小,默认为auto,可以设置为一个数值,用来表示目标大小。会覆盖元素的width/height等属性。
  • flex-grow:默认为0,设置放大比例系数。当主线上有多余的空间,设置有flex-grow属性的flexitem可以按比例放大以占用剩余空间。
  • flex-shrink:默认为1,设置缩小比例系数。当flexitem有多余的空间可以被挤压出来时,这个系数决定从flexitem,挤出多少空间。但是如果flexitem没有空间可以挤,那么这个参数无效。

flex-grow, flex-shrink和flex-basis可以合并到flex选项里面去。flex可以设置为initial (0,0,auto),auto(1,1,auto),none(0,0,auto),

order属性可以帮忙改变flexitem的次序

关于对齐方面,justify-content可以用来控制主线轴上flexitem的分布;align-content可以用来控制垂线轴上元素的分布;align-items可以用来控制主线轴上的元素在垂线轴上的对齐。

inline-flex

What’s the difference between display:inline-flex and display:flex?

display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.

How to force child div to be 100% of parent div’s height without specifying parent’s height?

其他参考

(完)

Load Disqus Comments