CSS flexbox 布局完整指南,本文解释了 Flexbox 的所有内容,并重点介绍了父容器(flex container) 和子元素(flex items)的所有不同可能的属性。包括了历史记录、演示、模式和浏览器支出图标。

背景

在 Flexbox Layout (弹性盒子)模式(W3C候选推荐为2017年10月),对齐和分配容器内的子项目提供更高效的方式。及时这玩意儿的大小和是未知的或者动态变化的。(正如他的名字一样 flex 弹性的意思)

flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度(和顺序)以最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。 一个使用了Flex布局的容器,将会扩展其子项以至于填充起可用的空间,或者缩小他们以防止溢出容器。

值得一提的是 Flexbox 布局不像常规布局

(基于垂直的块和基于水平的内联),flexbox布局方向是无关的。 虽然常规布局对页面很有效,但它们缺乏支持大型或复杂应用程序的灵活性(特别是在涉及方向改变、调整大小、拉伸、收缩等时)。

注意:Flexbox 布局最适合应用程序的组件和小规模布局,而 Grid 布局适用于较大规模的布局。

基础知识和术语

由于 flexbox 是一个完整的模块而不是单个属性,因此它涉及很多东西,包括它的整个属性集。其中一些可以设置在容器上(父元素,称为“弹性容器”),而其他则可以设置在子元素上(称为“弹性项目”)

如果常规布局是基于块布局与内联布局的方向流的,那么弹性布局就是基于“flex-flow流”。请查看下图,它解释了弹性布局的主要思想。

基本上,Flex项目是沿着主轴(main axis)(从main-start向main-end)或者侧轴(cross axis)(从cross-start向cross-end)排列。

  • main axis:Flex 容器的主轴主要用来配置Flex项目。注意,它不一定是水平,这主要取决于 flex-direction 属性。

  • main-start | main-end:Flex 项目的配置从容器的主轴起点边开始,往主轴终点边结束。

  • main size:Flex 项目的在主轴方向的宽度或高度就是项目的主轴长度,Flex 项目的主轴长度属性是 width 或 height 属性,由哪一个对着主轴方向决定。

  • cross axis:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。

  • cross-start | cross-end: 伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。

  • cross size:Flex 项目的在侧轴方向的宽度或高度就是项目的侧轴长度,Flex 项目的侧轴长度属性是 widthheight 属性,由哪一个对着侧轴方向决定。

容器属性

display

这个属性是定义在弹性容器上的;根据其值决定是内联还是块布局。这时它的直属下级将会变成flex文档流。


.container {

  display: flex; /* or inline-flex */

}

Flex 容器不是块容器,因此有些设计用来控制块布局的属片在 Flexbox 布局中不适用。特别是:多列组中所有 column-* 属性、floatclear 属性和 vertical-align 属性在 Flex 容器上没有作用。

如果元素 display 的值指定为inline-flex ,而且元素是一个浮动元素或绝对定位元素,则 display 的计算值是flex

flex-direction

这个是建立在主轴上的,从而定义了 Flex 项目放置在 Flex 容器的方向。FlexBox 是单方向的布局概念。可以将弹性项视为主要布置在水平行或垂直列中。


.container {

  flex-direction: row | row-reverse | column | column-reverse;

}
  • row(默认值):如果书写方式是 ltr ,那么 Flex 项目从左向右排列;如果书写方式是 rtl ,那么Flex项目从右向左排列

  • row-reverse:如果书写方式是 ltr ,那么Flex项目从右向左排列;如果书写方式是 rtl ,那么Flex项目从左向右排列

  • column:和 row 类似,只不过方向是从上到下排列

  • column-reverse:和 row-reverse 类似,只不过方向是从下向上排列

flex-wrap

弹性项默认会全部集中在一行。你可以使用这个属性来改变这种情况,让他们根据你的需要进行自动换行。文档方向在这里也起作用,决定了新的一行被堆叠的方向。

  • nowrap(默认):单行显示。在ltr排版下,项目自左向右;在rtl下,自右向左

  • wrap:多行显示。在ltr排版下,项目自左向右;在rtl下,自右向左

  • wrap-reverse:多行显示。与wrap相反

flex-flow

它是 flex-directionflex-wrap 的简写形式。它同时定义了弹性容器的主轴和侧轴。默认是 row nowrap


.container {

  flex-flow: column wrap;

}

justify-content

这属性是用来定义主轴上的对齐方式的。当所有的弹性项在一行并且无法弹性伸展,或者可伸展但是达到了最大尺寸,它能帮助分配剩下的多余空间。并且当他们行内溢出时,这个属性也可以对项目对齐施加一些控制。


.container {

  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

}
  • flex-start (默认):子项会从一行的起始处开始放置

  • flex-end :子项会从一行的结尾处开始放置

  • center :子项会集中在一行的中央

  • space-between :子项会被均匀的分布在行内;首项放置在一行的开始,尾项放置在一行的结束

  • space-around :子项会均匀的按照同等距离分布在一行。需要注意的是,在视觉上会觉得并不等距,因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离,但是与下一项会有两个单位空间的距离,因为下一项也有它自己的适配空间。

注意这里仅仅罗列除了部分的属性,因为浏览器的支持是不同的。例如 space-between 在某些版本的 Edge 还不支持,Chrome 中没有对 start/end/left/right支持。MDN有详细的图表。最安全的值是 flex-startflex-endcenter

align-items

align-items

这用来定义弹性项目在弹性容器的当前侧轴上的默认行为。可以认为是侧轴版的 justity-content


.container {

  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

}
  • flex-start :弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

  • flex-end:弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。

  • center:弹性项会被放置在侧轴的中央。

  • baseline:弹性项会根据他们的基线对齐。

  • stretch(默认):在侧轴方向上拉伸弹性项以致填充满弹性容器。(仍然受min-width/max-width的控制)

align-content

这个属性会根据在侧轴上的额外空间来排列容器的行,类似于justify-content在主轴在对齐单个弹性项的方式。

注意,这个属性对于只有单行的弹性项来说是没有效果的。

  • flex-start :行会紧靠容器的起始位

  • flex-end :行紧靠容器的结束位

  • center :行紧靠容器的中间位

  • space-between :每行会均匀分布;首行在容器起始处而最后行在容器结束处

  • space-around :每行根据相同的距离均匀的分布

  • stretch:每行将会伸展以占用剩余的空间。

子项目属性(Flex items)

order

默认情况下,弹性项目文档流顺序排列。但是,可以使用 order 属性来控制它在 flex 容器中出现的顺序。


.item {

  order: 5; /* default is 0 */

}

flex-grow

它定义了 Flex 项目在必要时的增长能力。它接收一个不带单位的值作为比例。这个值决定了弹性项目可以占用多少空间。如果所有的项目的值都设置为1,那么容器内剩余的空间将会被平均分配给所有的项目。如果其中一个值是2,那么这个项目占据的空间会是其他项目的两倍。


.item {

  flex-grow: 4; /* default 0 */

}

负数无效。

flex-shrink

这定义了 flex 项目在必要时收缩的能力。


.item {

  flex-shrink: 3; /* default 1 */

}

负数无效。

flex-basis

这定义了,当一个元素在被分配到剩余空间之前的默认大小。它可以是一个长度(如:20%,5rem等)或者一个关键字。auto关键字的意思就是『按照我的宽度和高度属性调整尺寸』(他会暂时根据main-size来布局大小直到被弃用)。如果使用关键字content,意思就是『基于内容调整大小』——不过这个关键字并一定能很好的工作,因此很难去测试或者知晓它的兄弟们max-content,min-content和fit-content做了什么。


.item {

  flex-basis: <length> | auto; /* default auto */

}

如果设置为0,额外空间内容不会被分解开来。如果设置成auto,额外空间会基于它的flex-grow的值进行分布。

felx

这是flex-grow, flex-shrink和flex-basis组合的简写。第二个和第三个参数(flex-shrink和flex-basis)是可选的。默认为0 1 auto,但如果您将其设置为单个数值,则类似于 1 0。


.item {

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

}

推荐你使用的这种缩写属性,这比设置单独属性更好。可以智能的通过缩写形式设置值。

align-self

这个属性可以覆盖单个 align-items设置的对齐方式,或者指定单个项目的对齐方式。

请参阅 align-items 说明以了解可用值。


.item {

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

}
扒皮猴社区版权所有,转载请标注出处!
扒皮猴 » Flexbox 完整指南-译文

发表评论