一个完整的Flexbox指南

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Flexbox布局(Flexible Box)模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。因此得其名"flex"。

W3C兴趣小组,翻译了一份中文,感兴趣的可以点击这里

Flex布局背后的主要思想是给容器控制项目(Flex项目)的宽度、高度的能力,使用Flex项目可以自动填满容器的可用空间(主要是适应所有类型的显示设备和屏幕大小)。Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间。

最重要的是Flexbox布局的direction-agnostic与常规则布局(块的vertically-based和内联horizontally-based)不同。而那些好的页面缺乏灵活性,特别是方向的改变,大小的调整,伸展,收缩等等。

注:Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局,而Grid布局更适合用于一些大规模的布局。

有关于Grid布局模块的中文资料可以点击这里查阅。

基础知识和专业术语

因为Flexbox是一个模块,而不是一个单一的属性,他涉及很多东西。其中有一些是容器上的属性(父元素,也被称为“flex容器”),而有一些是容器子元素上的属性(常称为“flex项目”)。

如果常规布局是基于块和内联文本流方向,那么Flex布局就是基于“Flex-flow”方向。请看看下面来自规范中的一张图,其解释了Flex布局的主要思想。

Flexbox

基本上,Flex项目是沿着main axis(从main-startmain-end)或者cross axis(从cross-startcross-end)排列。

  • main axis:Flex容器的主轴主要用来配置Flex项目。注意,它不一定是水平,这主要取决于flex-direction属性。
  • main-start | main-end:Flex项目的配置从容器的主轴起点边开始,往主轴终点边结束。
  • main size:Flex项目的在主轴方向的宽度或高度就是项目的主轴长度,Flex项目的主轴长度属性是widthheight属性,由哪一个对着主轴方向决定。
  • cross axis:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。
  • cross-start | cross-end:伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
  • cross size:Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度,Flex项目的侧轴长度属性是widthheight属性,由哪一个对着侧轴方向决定。

Flex容器属性

container

display

定义一个Flex容器,根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。

.container {
  display: flex; /* or inline-flex */
}

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


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

开启Flex容器:让一个元素变成伸缩容器

规范版本 属性名称 块伸缩容器 内联伸缩容器
标准版本 display flex inline-flex
混合版本 display flexbox inline-flexbox
最老版本 display box inline-box

flex-direction

flex-direction

这是用来创建方轴,从而定义Flex项目在Flex容器中放置的方向。Flexbox是一种单方向的布局概念。认为Flex项目主要排列方式要么是水平排列,要么是垂直列排列。

.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-direction row row-reverse column column-reverse
混合版本 flex-direction row row-reverse column column-reverse
最老版本 box-orient
box-direction
horizontal
normal
horizontal
reverse
vertical
normal
vertical
reverse

flex-wrap

flex-wrap

默认情况之下,Flex项目都尽可能在一行显示。你可以根据flex-wrap的属性值来改变,让Flex项目多行显示。方向在这也扮演了一个重要角度,决定新的一行堆放方向。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(默认值):单行显示,如果书写方式是ltr,Flex项目从左向右排列,反之rtl,从右向左排列
  • wrap:多行显示,如果书写方式是ltr,Flex项目从左向右排列,反之rtl,从右向左排列
  • wrap-reverse:多行显示,如果书写方式是ltr,Flex项目从右向左排列,反之rtl,从左向右排列

换行:指定伸缩项目是否沿着侧轴排列

规范版本 属性名称 不换行 换行
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部