Flex 布局

SegmentFault思否 · 公众号 · 程序员 · 2017-10-19 08:00

正文

本文最早发布在： Rootrl's blog

Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下：

Flex在移动端开发上已是主流，比如H5页面，微信小程序等等。

传统的布局方案主要基于CSS盒子模型，依赖Display、Position、Float等属性。但是它对于一些特殊布局非常不方便，比如水平垂直居中。传统方式实现起来非常繁杂，各种黑科技，比如以下是一种水平垂直居中的实现方式：

基础的DOM如下，一个父元素是宽高为500px的红色容器，包裹着宽高为100px的黄色子容器：

推荐文章

程序员的那些事 · 北京大学出的第二份 DeepSeek 教程来了！（PDF可下载）

23 小时前

码农翻身 · 漫画 | 为什么大家都愿意进入外企？

2 天前

程序猿 · 41岁DeepMind天才科学家去世：长期受抑郁困扰、曾诉AI工作压力太大、为利润而工作

2 天前

OSC开源社区 · AI大模型如何影响基础软件行业中的开发工具与环境？

5 天前

程序员的那些事 · 成人玩偶 + DeepSeek等大模型杀疯啦！中国制造的王炸组合，彻底征服欧美宅男

6 天前

圈内扒爷 · 李宇春何洁，陈奕迅，黄觉，高圆圆，叶璇，扒爷爆料回复贴

8 年前

FM93交通之声 · 匪夷所思！跨年夜，宁波奥迪女司机高速上逆行，一头撞上车！更诡异的事还在后面...

8 年前

最搞笑笑话王 · 群主唱的，看完不许笑

8 年前

毒舌电影 · 我为什么说国产剧的良心活在过去

8 年前

华夏时报 · “ST阵营”面临大换血，个股分化严重

7 年前