「前端开发」 -

CSS-Layout-06

CSS布局 —— 弹性盒布局

Posted by eliochiu on October 23, 2022

弹性盒基础

弹性盒布局(flexible box)是一种强大的布局方式,我们通过弹性盒设置空间的分布方式、元素之间的排列顺序,可以轻易地实现元素的横向、纵向、折行布局。

弹性盒依赖父子关系。在元素上声明display: flexdisplay: inline-flex可以使该元素变成弹性容器(flexible container),弹性容器中的元素称为弹性元素(flexible item)。

弹性盒有两个轴,其中横向的轴称为主轴(main axis),纵向的轴称为交叉轴(cross axis),每一个轴都有两端,分别为起始端(start)和终点端(end)。

弹性容器属性

弹性容器属性是作用在父盒子(弹性容器)上的属性,主要用于控制其内部弹性元素的排列方式,分别为flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

弹性容器的轴

弹性容器有两条轴,分别为主轴和交叉轴。默认情况下,主轴是从左到右排列,交叉轴从上到下排列。元素不能占满一行时,沿主轴排列;元素需要换行时,从下一行主轴的起始端开始排列。当更改弹性容器属性时,会更换轴的方向,甚至会更换轴的位置,具体规则参见下表:

flex-direction

flex-direction决定了弹性元素在弹性容器内部的排列方向,共有下列属性值:

  • row:默认的排列方式,沿着容器主轴从左到右排列。
  • row-reverse:沿着容器的主轴从右向左排列。
  • column:沿着容器的交叉轴从上到下排列。
  • column-reverse:沿着容器的交叉轴从下往上排列。

flex-wrap

flex-wrap规定了当一行无法放置弹性元素时,该如何显示,他有下列属性值:

  • nowrap:默认换行方式,表示不换行,此时元素的宽度失效,所有元素会自适应地挤在一行中。
  • wrap:换行,即如果一行放不下,会自动的挤到第一行的下面。
  • wrap-reverse:反向换行,换行的内容位于di一行的上面。具体参见下列图示。

no-wrap

wrap

wrap-reverse

flex-flow

flex-flowflex-directionflex-wrap的复合写法,默认值为row nowrap

justify-content

justify-content规定了弹性元素在主轴方向上的对齐方式,他有下列属性值:

  • flex-start:默认对齐方式。在主轴上左对齐。
  • center:在主轴上居中对齐。
  • flex-end:在主轴上右对齐。
  • space-between:在主轴上两端对齐(最左最右的元素分别位于起始端和终止端,其他元素自适应排列)。
  • space-around:以元素为单位考虑,保证每一个元素两侧的空白距离相等,因此元素的间隙应该是元素和容器间隙的2倍。
  • space-evenly:以行为单位考虑,每一个元素两侧的空白距都相等,元素的间隙等于元素与容器的间隙。

flex-start

center

flex-end

space-between

space-around

space-evenly

align-items

align-items属性用于规定元素在交叉轴上的排列方式,他有如下属性值:

  • flex-start:默认的对齐方式。在交叉轴上顶部对齐。
  • center:在交叉轴上居中对齐。
  • flex-end:在交叉轴上底部对齐。
  • baseline:在交叉轴上按第一行元素的文字基线对齐。
  • stretch:在交叉轴上拉伸对齐。

align-content

align-content属性指定垂直轴上的额外空间如何分配到弹性元素行之间和周围,适用于分多行显示的弹性容器。

align-contentalign-items虽然都是有关垂直轴上对齐方式的属性,但是align-content更关注如何实现行与行之间的对齐,而不是像align-items那样的元素与元素之间的对齐。

也就是说,align-content以行为单位看待问题,align-items则是以元素为单位看待问题。

他有如下属性值:

  • flex-start:默认的对齐方式。行在交叉轴上顶部对齐。
  • center:行在交叉轴上居中对齐。
  • flex-end:行在交叉轴上底部对齐。
  • space-between:行在交叉轴上按两端对齐。
  • space-around:保证每一行在交叉轴上两侧的距离相等,行的间隙是行和容器间隙的2倍。
  • space-evenly:保证每一行在交叉轴上两侧的距离相等,行的间隙和行和容器间隙相等。
  • stretch:行在交叉轴上拉伸对齐,将所有可拉伸的元素拉伸到和最高的元素一样高(可拉伸元素是指没有指定min-width, max-width)属性的元素。

弹性元素属性

弹性容器的子代就是弹性元素。也就是说,只要我们为一个容器指定为display: flex,他其中的所有子元素就自动成为弹性元素。

弹性元素属性主要有:flex-grow, flex-shrink, flex-basis, flex, order, align-itself

弹性元素的特性

弹性元素具有以下特性:

  • 弹性元素外边距不折叠。
  • 弹性元素的floatclear属性不生效,不会使元素脱离标准流。
  • 弹性元素的绝对定位属性会导致元素脱离标准流,并且绝对定位有效。

flex-grow

flex-grow属性规定了如果一行还有多余空间,如何分配多余空间。flex-grow默认值为0,代表不分配多余空间。

如果一个容器只有两个元素,他们的flex-grow都为1,则代表二者平分剩余空间。如果其中一个flex-grow为1,另一个为2,则为2的元素将会占用剩余空间的2/3,为1的占用剩余空间的1/3

flex-shrink

flex-shrink属性规定了如果一行空间不够,该按何比例如何缩小元素。flex-shrink默认值为1,代表不缩小。

如果一个容器其他元素flex-shrink都为0,只有一个为1,那么先正常分配所有元素,为1的元素占据剩余的空间。

flex-basis

flex-basis属性规定了在增长和缩小之前,元素的初始宽度。

flex

flex属性是flex-growflex-shrinkflex-basis的复合属性。

align-itself

align-itself属性规定了元素依照自身想法对齐。

弹性容器中的对齐方式将会应用于所有元素,而align-itself可以为元素自身定制对齐方式,这个属性会覆盖容器属性align-items

order

order属性指定元素的排序方式。

默认情况下,元素的所有order属性都为0,此时将按照元素在html文档中的书写位置进行排序。

order可以为负数,order越小,元素排序越靠前,可以通过控制order的大小控制元素排列的顺序。