图解CSS Flexbox布局

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

@js_tut的新书《CSS Visual Dictionary》里面的插画非常有意思。他在Medium上把盒模型FlexboxGrid三个部分放了一些出来。我觉得他提供的插画非常形象的阐述了这几个部分的知识点。今天把 Flexbox部分的插图直接拿来使用了,通过这些插图再次向大家阐述CSS Flexbox相关的知识。

对于Flexbox的初学者,都希望知道Flexbox能做什么?时至今日,互联网上有关于Flexbox的教程绫罗满目,参差不齐。在这种情形之下,对于初学者而言并不是一件好事。那么今天这篇文章中所展示的插图,有助于初学者更好的掌握Flexbox的知识。当然对于有一定基础的同学,也能更好的加强其对Flexbox的印象和理解。

那我们就开始吧!

Flex容器属性

Flex是一组规则,用于在父容器中自动扩展多列和多行。

简单的理解就是Flex有一组样式规则,这些样式规则可以帮助你对内容按行或列来布局。而这些规则都将运用于Flex容器元素上。

display:flex

在Flexbox中与其他CSS属性略有不同。在Flexbox中有一个Flex容器的概念(主容器),在Flex容器中的直接子元素都是Flex项目。而我们刚才提到的Flex规则,都只用于Flex容器上。

从上图中我们可以得知,一旦你在某个元素上设置了display:flex;样式,那么该元素就自动变成了Flex容器,而容器中的直接子元素就被称为Flex项目。每个Flex容器都有起点(flex-start)和终点(flex-end)。

主轴(Main Axis)和 纵轴(Cross Axis)

Flexbox的布局是一维布局,Flex项目只能按行或列来排列(可以理解是以线性方式来排列)。由于这个原因,它有两个坐标轴。横轴称为主轴(Main Axis),纵轴为横轴(Cross Axis)。这两个轴始终是相互垂直的。

这里需要特别注意,很多初学Flexbox的同学有一个误区,始终认为水平方向的横轴就是主轴,垂直方向的纵轴就是纵轴。事实上并非如此。因为flex-direction的值可以决定Flex容器中主轴和纵轴的方向。当flex-direction的值为column时,垂直方向的轴就变成了主轴,与其垂直的就是纵轴(水平方向的轴)。

要控制主轴方向内容(Flex项目)的宽度和 Flex项目之间的间隙,可以使用justify-content属性。如果要控制纵轴方向的行为,需要使用align-items属性。

比如说你想创建一个三列的布局,当你只有三个Flex项目的时候,它们一行就足够排列;一旦你有六个Flex项目的时候,从第四个开始自动会在第二行排列;如此类推,超过六个的

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/the-complete-css-flex-box-tutorial.html

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

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