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 - 只是一个响应灵活的网格 * Waffle Grid - 易于使用的flexbox网格系统

关于flexbox的令人敬畏的项目. * Cool examples of flexbox layout - 一个代码集合. * 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轻松解决.:metal: * Visualizing Flexbox - 一个简洁的小CodePen演示,可以使用Flex属性. * ZEEF CSS Flexbox - zeef上的精彩flexbox ::metal: * Flexbox Zombies - 学习CSS flexbox的游戏.

Courses

Who to Follow

谈论它的人. * Afonso Pacifer @afonsopacifer 布拉德弗罗斯特 @brad_frost * Chris Coyier @chriscoyier * Lea Verou @LeaVerou * Mickley Gillenwater @zomigi 尼古拉斯 @necolas 菲利普沃尔顿 @philwalton 雷切尔安德鲁 @rachelandrew * Richard Herrera @doctyper * Sara Soueidan @SaraSoueidan * Sean Fioritto @sfioritto

Contributing

想贡献? Follow these recommendations.

License

MIT License © Afonso Pacifer