时下Web App中的Flexbox应用
虽然语法可能比较混杂,但 Flexbox 还是名不虚传的。它创造的是可伸缩的、有弹性的、可改变视觉顺序的智能盒子。它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置。使用盒模型来工作是非常通用的。
![婼籽](https://static.fequan.com/vueconf/img/default_avatar.png)
虽然语法可能比较混杂,但 Flexbox 还是名不虚传的。它创造的是可伸缩的、有弹性的、可改变视觉顺序的智能盒子。它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置。使用盒模型来工作是非常通用的。
Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS3中的一种新的布局模式。Flexbox可以控制未知容器元素的对齐方式,排列方向,排列顺序等,甚至是在未知大小的容器也能这样做。Flex容器的主要特点是能够修改其子元素(Flex item)的宽度或高度,使其在不同的屏幕尺寸中填补可用的空间。许多设计人员和开发人员发现使用Flexbox来布局更容易,可以使用更少的代码,更简单的方式实现更复杂的布局,也使整个开发过程更为简单。Flexbox布局算法基于水平或垂直的块或行内元素来布局。Flexbox布局常用于小的应用程序组件之中,而CSS Grid布局模块将应用于大规模的布局之中。
Flexbox最大的优点是计算空间能力强,尤其是当对一个容器里未知数量的子项目进行布局时。更具体来说,当给导航栏或者网格布局时,它们所需的空间有可能远超过现在计算的数值。想象一下在CMS里面当用户增删导航栏的项目时,既不想更改样式,又要填充其空间。你甚至可以用它同时计算不同类型的单元。对于不熟悉Flexbox的人来说,在CSS里它就是一种计算并分布空间的智能布局模式,同时也解决了一些困扰多年的布局问题以及hack。
Flexbox布局(Flexible Box)模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。因此得其名"flex"。本文是根据CSS-Tricks整理的一篇《A Complete Guide to Flexbox》和W3C中文兴趣小组翻译的Flexbox规范整理。
**您使用 flexbox吗?**上周我在 twitter 上,问了这个问题,很惊讶地发现,不少于 50%的人回答是。之所以感到惊讶是因为,直到最近,我并不在我的任何项目中使用 flexbox ,我想我一定是唯一的一个。我不使用 flexbox 有几个原因。但是,经过一些调查研究之后,我的担忧得到明显的减弱,我已经开始了转变。所以这里有你应当开始使用Flexbox的六个理由。
在最近的一个项目中,我们终于将Flexbox广泛用于页面布局当中。通过这次实战,让我对Flexbox相关知识有了更进一步的了解,也在这方面增涨了不少的知识。接下来,我将分三个部分来解释Flexbox在Web布局中的实战。
“Card”这样的UI组件在现在的Web中经常可见,但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在,通过CSS Grid和Flexbox的组合,可以使卡整齐对齐,响应性更好,并适应其中的内容。接下来看看我们是如何制作的。
这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备。学习Flexbox可不是件很有趣的事情,因为它将挑战你所知道的CSS布局方面的知识。当然这也是非常正常的,因为一切知识都是值得学习的。另外你要认值对待Flexbox。因为它是现代Web布局的主流方式之一,不会很快就消失。它也成为一个新的W3C标准规范。既然如此,那让我们张开双臂,开始拥抱它吧!
对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档。
说到overflow
对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow
来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow
。