runfast󰀦lynda

CSS3学习笔记:Flexible Box

Flexible Box 是什么?

CSS3的 Flexible Box(或者说 Flexbox )是一种布局模式,这种布局模式适合于不同的屏幕尺寸和不同的显示设备,它给页面元素提供了适配这些情况的能力。具体来说,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。很明显,这弥补了传统的布局方式的各种不灵活性。

建立 Flexible Box

需要注意的是 flexbox 是一个整体模块,而不是单一的一个属性,它涉及到了很多东西,包括它的整个属性集。它们之中有一些是在父容器上设置,而有一些则是在子容器上设置。

弹性容器

弹性子元素的父元素。 通过设置display 属性的值为flex 或 inline-flex将其定义为弹性容器。

display: flex | inline-flex; 

在容器中默认存在两根轴:水平的主轴(main axis)和垂直的侧轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;侧轴的开始位置叫做cross start,结束位置叫做cross end。 子元素默认沿主轴排列。单个子元素占据的主轴空间叫做main size,占据的侧轴空间叫做cross size。具体看如下图:

这里还有浏览器问题需要注意,Firefox 支持替代的 -moz-box-flex 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

弹性子元素

弹性容器的每一个子元素变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。而只包含空白的弹性子元素不会被渲染,就好像它被设定为 display:none 一样。

不影响 Flexible Box 的属性

因为弹性盒子使用一种不同的布局逻辑,一些属性会在弹性容器上无效。

CSS列(CSS columns)对弹性子元素是无效的。

float 和 clear 对弹性子元素无效。使用 float 会导致 display 属性计算为 block.

vertical-align 对弹性子元素的对齐无效。

弹性容器的属性

注意这些都是设置到弹性容器上的。

flex-direction

设置子元素的排列方向。

flex-direction: row | row-reverse | column | col
umn-reverse

row:横向从左到右排列(左对齐),默认的排列方式。 row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。 column:纵向排列。 row-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

flex-flow

当子元素在一行排布不下时,该如何换行,就会用到flex-wrap属性。

flex-wrap: nowrap | wrap | wrap-reverse

nowrap:不换行。 wrap:自动换行。 wrap-reverse:反转 wrap 排列。就是换行,只是把第一行放在下方。

flex-flow

flex-flow属性是一个复合属性,包括flex-direction属性和flex-wrap属性,默认值为row nowrap。

flex-flow: flex-direction || flex-wrap;
justify-content

justify-content属性定义了子元素在主轴(main axis)上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,子元素之间的间隔都相等。 space-around:每个子元素两侧的间隔相等。所以,子元素之间的间隔比子元素与边框的间隔大一倍。

align-items

相应的,align-items定义子元素在侧轴(cross axis)上如何对齐。

align-items: flex-start | flex-end | center | bas
eline | stretch

flex-start:侧轴的起点对齐。 flex-end:侧轴的终点对齐。 center:侧轴的中点对齐。 baseline: 子元素的第一行文字的基线对齐。 stretch(默认值):如果子元素未设置高度或设为auto,将占满整个容器的高度。

align-content

align-content属性定义了多根轴线的对齐方式。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start:与侧轴的起点对齐。 flex-end:与侧轴的终点对齐。 center:与侧轴的中点对齐。 space-between:与侧轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。

子元素的属性

order

order属性定义子元素的排列顺序。数值越小,排列越靠前,默认为0。

order: <integer>;
flex-grow

flex-grow属性定义子元素的放大比例。

flex-grow: <number>;
flex-shrink

定义子元素的缩小比例。flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行等比例空间收缩。

flex-grow: <number>;

举个栗子:如果共有3个子元素都没有设置flex-shrink,那么三个子元素的flex-shrink的值为1,意味着它们三个平分剩余空间,也就是等比例缩放。如果此时设置其中一个子元素的flex-shrink为3,那么他们三个分剩余空间的比例是1:1:3,也就是flex-shrink为3的子元素,在空间不足时,缩小的最厉害。

flex-basis

flex-basis属性定义了在分配多余空间之前,子元素占据的主轴空间(main size)。它的默认值为auto,即子元素的本来大小。任何可用于width和height的值都可接受。若值为0,则必须加上单位,以免被视作伸缩性。 默认值为0%。

 flex-basis: <length | auto>;
flex

flex属性是一个复合属性,包括flex-grow, flex-shrink 和 flex-basis,默认值为0 1 auto。

flex: none |[ <'flex-grow'><'flex-shrink'? || <'flex-basis'> ]

例如:

flex: 1 30px; 
/* 两个值:flex-grow | flex-basis */
flex: 2 2 10%;
/* 三个值:flex-grow | flex-shrink | flex-basis */
align-self

属性 align-self 覆盖父元素的align-items属性,定义了单独的弹性子元素如何沿着侧轴排列。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

其他值都和父元素align-items属性一致,只有auto值不同。

auto:如果align-self的值为auto,则其计算值为元素的父元素的align-items值,如果其没有父元素,则计算值为stretch。

参考文档: