首页
学习
活动
专区
工具
TVP
发布

CSS3:flexbox布局语法教程

文 | 归仓 图 | 网络

01

首先,我们来讲讲为何要使用CSS布局。学习前端的你有没有想过,这是为什么呢?如果你只是想把所有内容都塞进一栏里,那么不用设置任何布局也是可以的。然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受:读完每一行之后,你的视觉焦点要从右到左移动一大段的距离。

布局一

布局二

看完以上两种布局,相信大家也就明白了。显然,第二种有CSS布局的浏览起来更加方便。

02

接下来,就进入该篇文章的正题,CSS布局之flexbox布局语法教程。新的flexbox布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。不过这里仍旧想要分享一些简单的例子,来让你知道即将发生的改变。这些例子目前只能在支持flexbox的Chrome浏览器中运行,基于最新的标准。

当然,网上也有不少过时的flexbox资料。如果你想要了解更多有关flexbox的内容,请查阅相关flexbox文章。使用flexbox你还可以做的更多,这里只是一些让你了解概念的例子:

使用flexbox的简单布局

使用flexbox的牛逼布局

使用flexbox的居中布局

03

最后,总结上述几种flexbox布局的实现,相信大家对它或多或少能掌握点。有句古话说的好,"纸上谈兵终觉浅,绝知此事要躬行"。希望大家在以后的前端布局中,能将所学知识运用在实际前端开发中。

注意:设为flex布局以后,子元素的float、clear和vertical-align将失效。

扫下面关注

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180421G1FSGE00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券