Flexbox
> CSS Flexible Box Layout Module 或仅 Flexbox 的精选列表. 灵感来自 awesome-webcomponents 和 awesome-svg.
W3C Specification¶
该规范描述了为用户界面设计优化的 CSS 框模型. * CSS Flexible Box Layout Module Level 1
Newsletter¶
Books¶
Guides¶
开发人员或设计人员的指南，开始他们研究这项奇妙的技术.
* A guide to flexbox
* A visual guide to CSS3 flexbox properties
* flexbox (pt-br)
* Dive into flexbox
* How Flexbox works — explained with big, colorful, animated gifs
* How Flexbox works — explained with big, colorful, animated gifs (pt-br)
* Learn layout - flexbox (pt-br)
* Learn layout - flexbox
* Reference of flexbox
* Responsive design of the future with flexbox
* The Flexbox Reading List: Techniques and Tools
* Um guia visual para Flexbox (pt-br)
* Usando caixas flexiveis CSS (pt-br)
* Using CSS flexible boxes
* What IS Flexbox?
* Desarrollo de aplicaciones web Flexibles (es-es)
* Webflow Flexbox
Cross Browser¶
适用于您的项目的提示和技巧在任何地方都适用 :D
Articles¶
- 6 Reasons to Start Using Flexbox
- Advanced cross-browser flexbox
- Are we ready to use flexbox?
- CSS Flexbox Is Entirely Logical (Almost)
- Designing A Product Page Layout with Flexbox
- Normalizando bugs no flexbox em diversos navegadores (pt-br)
- Normalizing cross-browser Flexbox bugs
- Using flexbox: mixing old and new for the best browser support
- Using Modernizr with Flexbox
Support¶
Preprocessors in action¶
Polyfills¶
Other Interesting Articles¶
与 flexbox 相关的问题列表.
* Almost complete guide to flexbox (without flexbox)
* Designing CSS layouts with flexbox is as easy as pie
* Flexbox For Interfaces All The Way: Tracks Case Study
* Flexbox’s Best-Kept Secret
* Grid, Flexbox, Box Alignment: Our New System for Layout
* Old flexbox and new flexbox
* Using flexbox today
* Laying Out A Flexible Future For Web Design With Flexbox
* Flexbox Cheatsheet
Presentations¶
厌倦了阅读？ 立即观看交互式演示并学习 flexbox.
Videos¶
- CSS Layout o ontem, o hoje e o depois (pt-br)
- CSS FlexBox Essentials
- CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)
- Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap
- Enhancing Responsiveness With Flexbox
- Flexbox - CSS Day
- Guía Completa de Flexbox desde 0 (ESP)
- HTML5. Desenvolvimento avançado
- Introduction to Flexbox
- Leveling up with flexbox
- What the flexbox? - 一个简单的 20 个视频课程，将帮助您掌握
- Flexbox Fundamentals
Sketching with CSS Flexbox Guide by @sfioritto¶
Read Materials¶
Video Materials¶
- Flex-Container Pt. 1: Position Items within a flexbox container
- Flex-Container Pt. 2: Rows and Columns
- Grow and Shrink Flex Items
- Implementing the Sticky Footer and Holy Grail layout
Slides and Notes¶
- Building responsive layouts presentation
- CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)
- CSS3 layout
- Flexbox
- Flexbox and Grid Layout
- Future css layout fowd
- Leveling up with flexbox
- RWD flexbox
- CSS Layout: from Table to Flexbox
Tools¶
对创建他们的项目有一点帮助：D * Build with Flexbox * CSS flexbox please * CSS Flexbox snippets for Atom * CSS Flexbox snippets for Sublime Text ⅔ * Fibonacci * Flexbox in 5 minutes * Flexbox playground * Flexbox property manipulator * Flexplorer * Flexyboxes * Test CSS Flexbox Rules Live * Try Flexbox
Libraries and Frameworks¶
基于 flexbox 的令人难以置信的库列表.
* Bem grid
* Flexboxgrid
* Flex Grid Framework
* Flexbox Grid for Stylus
* Fuux - Fuux 是一个 Flexbox 库，它使用与类相同的 flexbox 接口.
* Ginger Grid - 以一只可爱的小狗命名的 Flexbox 网格框架.
* Bulma - 基于 Flexbox 的现代 CSS 框架
* Milligram - 一个极简的 CSS 框架
* RolleiFLEX - 只是一个响应式 flexbox 网格
* Waffle Grid - 易于使用的 flexbox 网格系统
Featured Projects¶
关于 flexbox 的很棒的项目.
* Cool examples of flexbox layout - 一个codepen一个集合.
* flex-box - 一个自定义元素，使 flexbox 的基础知识更易于使用.
* Flexbugs - 社区策划的 flexbox 问题列表和针对这些问题的跨浏览器解决方法.
* Flexbox Froggy - 学习 CSS flexbox 的游戏.
* Flexbox Patterns - 示例和源代码将教您如何使用 CSS flexbox 构建 UI 组件！ 什么是弹性盒子？
* Flexbox Defense - 塔防有一个转折点：所有塔都必须使用 CSS Flexbox 定位.
* Flexbox tester - 了解如何计算弹性项目的宽度.
* Flexbox layout - FlexboxLayout 是一个库项目，它将 CSS Flexible Box Layout Module 的类似功能带到 Android.
* FlexLayout for iOS - FlexLayout 使用 Swift 将 flexbox 引入 iOS. 简洁、直观和可链接的语法.
* grid-styled - 基于 Flexbox 的响应式 ReactJS 网格系统，使用样式化组件构建
* iron-flex-layout - 用于跨平台 flex-box 布局的样式混合
* Post Apocalypse Flexbox
* React-flexbox - 实现 css flexbox 以响应内联样式.
* Reflexbox - 响应式 React flexbox 网格系统高阶组件.
* Solved by flexbox - 展示曾经很难或无法单独使用 CSS 解决的问题，现在使用 Flexbox 变得非常容易.
* Visualizing Flexbox - 一个简洁的小 CodePen 演示，可以使用 Flex 属性.
* ZEEF CSS Flexbox - zeef.:metal 上很棒的 flexbox：
* Flexbox Zombies - 学习 CSS flexbox 的游戏.
Courses¶
- CSS Flexbox Layout - 树屋
- Learn Flexbox for free - 斯克里巴
Who to Follow¶
谈论它的人. * 阿方索·帕西弗 @afonsopacifer 布拉德弗罗斯特 @brad_frost * 克里斯·科耶 @chriscoyier * 利亚维鲁 @LeaVerou 米克利吉伦沃特 @zomigi 尼古拉斯 @necolas * 菲利普沃尔顿 @philwalton 雷切尔·安德鲁 @rachelandrew * 理查德·埃雷拉 @doctyper * 萨拉苏伊丹 @SaraSoueidan *肖恩·菲奥里托 @sfioritto
Contributing¶
想贡献吗？ Follow these recommendations.