现代 CSS

Flexbox

现代Web技术让我们离容器查询更近一步

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革,十年后的今天,CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大,但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过,庆幸的是,现代的一些 Web 技术(比如,FlexboxGrid媒体查询比较函数等)让我们离容器查询特性更近一步。今天我们来看看,这些现代Web技术是如何让我们离容器查询更近一步。

Flexbox布局中不为人知的细节

Flexbox布局 已是目前最为流行的Web布局方式之一,它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。但也是因为它有极大的灵活性,里面隐藏了一些不为人知的细节,如果不是对Flexbox极为熟悉或者对其规范极为了解的话,其中有很多细节将会被遗漏,而这些细节又会让你在使用的感到困惑,甚至是带来一定的麻烦。这次在优化imgcook的Flexbox布局时,重新阅读了一次Flexbox的规范,发现自己曾忽略了部分重要信息。为此在这篇文章中,将Flexbox布局CSS的书写模式逻辑属性,对齐方式结合在一起整理了一篇笔记,希望对于想了解或使用Flexbox碰到痛楚的同学有所帮助。

你可能不太熟知的布局技巧

随着Web技术不断的革新,CSS近几年也变得多年前要更强大。在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日,其中有一些CSS的属性可以让开发者能节约更多的时间。比如说,在Web布局中,现代CSS特性就可以更好的帮助我们快速实现,例如等高布局水平垂直居中,经典的圣杯布局、宽高比例页脚保持在底部等。在本文中,我将会介绍一些不同的CSS属性来实现这些效果,希望大家会感兴趣。更希望对大家今后的工作有所帮助。

图解CSS:Flexbox布局(Part2)

在《图解CSS:Flexbox布局(Part1)》中主要和大家聊了Flexbox布局模块中的技术术语以及运用于Flex容器上的相关属性。在第二部分,主要和大家介绍运用于Flex项目中的属性,比如align-selforderflex。这一部分也是Flexbox布局中相当复杂的一部分,因为flexflex-basisflex-growflex-shrink属性的计算非常复杂,也直接影响到Flex项目的尺寸大小。如果你对这部分感兴趣的话,请继续往下阅读。

图解CSS:Flexbox布局(Part1)

CSS布局发展至今可以说变化非常的大,其中Flexbox布局已经取代了以前最为流行的浮动布局。这里所说的Flexbox布局指的就是 CSS Flexible Box Module Level 1(简称Flexbox,弹性布局)。Flexbox模块的出现让Web的布局变得极为简单。虽然Flexbox给Web布局带来了很多优势,而且让布局变得简单,但就Flexbox模块本身来说是非常复杂。在这一章节中,我将和大家一起来探讨CSS的Flexbox 模块相关的知识。

你真的了解CSS的flex-basis吗?

CSS的flex-basisFlexbox属性flex的简写属性之一。大部分同学在很多时候都认为flex(当然也包括flex-basis)属性非常的简单,但事实上并非如此,如果你阅读过《聊聊Flexbox布局中的flex的演算法》和《深入理解 flex 布局以及计算》会发现这flex并不容易。在W3C规范中flex-basis是一个基准值,它接受widthheight相同的值。如果你熟悉的话,widthheight是隶属于CSS Intrinsic & Extrinsic Sizing Module Level 3规范,而且该规范除了widthheight属性之外还有min-width(或min-height)、max-width(或max-height)、min-contentmax-contentfit-content等。那么问题就来了,在Flexbox布局中,flex-basisCSS Intrinsic & Extrinsic Sizing Module Level 3提到的各属性有何差异呢?这就是今天将要和大家一起探讨的。如果你感兴趣,欢迎继续往下阅读。

聊聊Flexbox布局中的flex的演算法

到目前为止,Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间,也会按照收缩比率来缩小各Flex项目,以免Flex项目溢出Flex容器。但其中Flex项目又是如何计算呢?他和扩展比率或收缩比率之间又存在什么关系呢?在这篇文章中我们将一起来探来。

Flexbox vs Grid:基本概念

整个Web在不断的演进,那么为Web服务的理念与技术等等也在不断的进行演化。那么我们今天要聊的话题,Web布局中最为优秀的两种布局方式:Flexbox布局CSS Grid布局。有关于这两方面的知识,其实在W3cplus上已经有很多相关的内容。由于这两种布局方式对Web布局带来了很多改变,而且两者都有其自身的优势。正因为如此,很多同学总是会类似的一个问题:应该使用Flexbox还是Grid来进行布局?那么我们从这篇文章开始,将会分几篇文章一起来介绍Flexbox布局和CSS Grid布局两者的差异性?我们又应该如何的选择,才能更适合我们项目的布局?希望接下来的内容对大家有所帮助。

图解CSS Flexbox布局

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

CSS Grid和Flexbox解决实际的布局问题

就目前为止,CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持,但对于实现布局而言,这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话,那么对于Web的布局将是一种福音。就前面学习的CSS GridCSS Flexbox,我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中,已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章,将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

页面

返回顶部