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的强大之处。那是因为他们的结合将解决布局的实际问题。

灵活的overflow

说到overflow对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow

深入理解 flex 布局以及计算

对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档。

页面

返回顶部