Flexbox

awesome flexbox

Build Status Awesome

> CSS灵活框布局模块或仅Flexbox的精选列表. 受启发 awesome-webcomponentsawesome-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

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

Sketching with CSS Flexbox Guide by @sfioritto

Read Materials

Video Materials

Slides and Notes

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网格系统

关于flexbox的很棒的项目. * Cool examples of flexbox layout -Codepen集合. * flex-box -一个自定义元素,使flexbox的基础更加易于使用. * Flexbugs -社区策划的flexbox问题列表以及针对这些问题的跨浏览器解决方法. * Flexbox Froggy -一个学习CSS flexbox的游戏. * Flexbox Patterns -示例和源代码将教您如何使用CSS flexbox构建UI组件! 什么是flexbox? * 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 -用于跨平台弹性盒布局的样式混合 * Post Apocalypse Flexbox * React-flexbox -以内联样式的形式实现CSS flexbox. * Reflexbox -响应式React flexbox网格系统高阶组件. * Solved by flexbox -展示了曾经很难或无法通过CSS单独解决的问题,现在通过Flexbox变得轻而易举. * Visualizing Flexbox -简洁的CodePen演示,可以使用Flex属性. * ZEEF CSS Flexbox -zeef上很棒的flexbox :: metal: * Flexbox Zombies -一个学习CSS flexbox的游戏.

Courses

Who to Follow

谈论这个的人 阿方索·帕西弗 @afonsopacifer 布拉德·弗罗斯特 @brad_frost 克里斯·科耶尔 @chriscoyier * Lea Verou @LeaVerou 米克利·吉伦沃特 @zomigi 尼古拉斯 @necolas 菲利普·沃尔顿 @philwalton 雷切尔·安德鲁(Rachel Andrew) @rachelandrew 理查德·埃雷拉(Richard Herrera) @doctyper * Sara Soueidan @SaraSoueidan 肖恩·菲奥瑞托 @sfioritto

Contributing

想要贡献? Follow these recommendations.

License

MIT License © Afonso Pacifer