Skip to content

Flexbox

awesome flexbox

Build Status Awesome

> CSS Flexible Box Layout Module 或仅 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 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

Who to Follow

谈论它的人. * 阿方索·帕西弗 @afonsopacifer 布拉德弗罗斯特 @brad_frost * 克里斯·科耶 @chriscoyier * 利亚维鲁 @LeaVerou 米克利吉伦沃特 @zomigi 尼古拉斯 @necolas * 菲利普沃尔顿 @philwalton 雷切尔·安德鲁 @rachelandrew * 理查德·埃雷拉 @doctyper * 萨拉苏伊丹 @SaraSoueidan *肖恩·菲奥里托 @sfioritto

Contributing

想贡献吗? Follow these recommendations.

License

MIT License © Afonso Pacifer