《Flex 布局教程：语法篇》学习笔记

蔚落 2022-05-29 23:14 198阅读 0赞

大神文章，一篇足矣：[阮一峰：Flex 布局教程：语法篇][Flex]。

该文详细介绍了Flex布局的各属性及取值说明，并且附有 [JailBreak][]制作的 [Demo][]。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70][]

本人基于学习过程，编写了极简Demo，用于需要时通过开发者工具查看复制，已上传至[Github][]。

预览地址：[**https://fukaiit.github.io/Flex/**][https_fukaiit.github.io_Flex]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 1][]

[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[JailBreak]: http://vgee.cn/
[Demo]: http://static.vgee.cn/static/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]: /images/20220530/e42cd690823043d28f18354edd0dc2a2.png
[Github]: https://github.com/fukaiit/Flex
[https_fukaiit.github.io_Flex]: https://fukaiit.github.io/Flex/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70 1]: /images/20220530/400e7897e02f4607b2b832064a97089b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flex 布局教程：语法篇

Flex 布局教程：语法篇 [http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.rua

谁借莪１个温暖的怀抱￠/ 2022年11月13日 11:30/ 0 赞/ 167 阅读

相关 Flex 布局教程：语法篇

作者： [阮一峰][Link 1] 日期： [2015年7月10日][2015_7_10] 网页布局（layout）是CSS的一个重点应用。 ![bg2015071001

柔光的暖阳◎/ 2022年07月16日 00:11/ 0 赞/ 181 阅读

相关 Flex 布局教程：语法篇

转载：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（layout）是CSS的一个重点应用。 !

待我称王封你为后i/ 2022年07月11日 08:12/ 0 赞/ 187 阅读

相关 Flex 布局教程：语法篇

作者： [阮一峰][Link 1] 日期： [2015年7月10日][2015_7_10] 网页布局（layout）是 CSS 的一个重点应用。 ![bg20150710

青旅半醒/ 2022年06月10日 09:39/ 0 赞/ 219 阅读

相关《Flex 布局教程：语法篇》学习笔记

大神文章，一篇足矣：[阮一峰：Flex 布局教程：语法篇][Flex]。该文详细介绍了Flex布局的各属性及取值说明，并且附有 [JailBreak][]制作的 [Demo

蔚落/ 2022年05月29日 23:14/ 0 赞/ 199 阅读

相关 Flex 布局教程：语法篇

一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局

傷城~/ 2022年05月28日 00:23/ 0 赞/ 199 阅读

相关 Flex 布局教程：语法篇

网页布局（layout）是CSS的一个重点应用。 ![bg2015071001.gif][] 布局的传统解决方案，基于[盒状模型][Link 1]，依赖 [display]

墨蓝/ 2022年05月24日 11:34/ 0 赞/ 202 阅读

相关 Flex 布局教程：语法篇

From: [http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com

╰半橙微兮°/ 2022年05月15日 00:17/ 0 赞/ 210 阅读

相关 Flex 布局教程：语法篇

网页布局（layout）是 CSS 的一个重点应用。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

悠悠/ 2022年01月22日 05:57/ 0 赞/ 243 阅读

相关 Flex 布局教程：语法篇

网页布局（layout）是CSS的一个重点应用。 ![bg2015071001.gif][] 布局的传统解决方案，基于[盒状模型][Link 1]，依赖 [dis

本是古典何须时尚/ 2021年07月16日 20:44/ 0 赞/ 495 阅读