# flexbox

收集整理css flex相关的资源。使用git submodule 方便同步作者原仓库资源。

# 目录

• 下载
• 文章
• 资源
  • flex.css
  • Flexbox Patterns
  • solved-by-flexbox
  • flex-layout-attribute
  • flex-layout
  • sass-flex-mixin
  • flexbugs
  • 其他
  • 综合
• 更新日志

# 下载

git clone --recursive git@github.com:huixisheng/flexbox.git

# 文章

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇
• 我的 Flexbox 之旅
• FLEXBOX FROGGY玩游戏学flex
• Flexbox in CSS在 CSS 中可使用的 CSS3 Flexbox 特性
• http://jonibologna.com/flexbox-cheatsheet/
• A Complete Guide to Flexbox
• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

# 工具

• http://learnlayout.com/flexbox.html
• http://bennettfeely.com/flexplorer/
• https://yoksel.github.io/flex-cheatsheet/#flex-basis
• https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
• https://chriswrightdesign.com/experiments/flexbox-adventures/
• http://the-echoplex.net/flexyboxes/

# 手册

• http://caniuse.com/flexbox
• https://www.w3.org/TR/css-flexbox-1/
• Flexbox Cheatsheet Cheatsheet
• https://drafts.csswg.org/css-flexbox-1/

# 资源

# flex.css

flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular.

作者: lzxb https://github.com/lzxb/

演示: http://lzxb.github.io/flex.css/ http://lzxb.name/flex.css/

# Flexbox Patterns

Patterns for using flexbox CSS to build awesome UI components.

作者: cjcenizal https://github.com/cjcenizal/

演示: http://www.flexboxpatterns.com/

# solved-by-flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. 作者: philipwalton https://github.com/philipwalton/

演示: https://philipwalton.github.io/solved-by-flexbox/

中文: https://hufan-akari.github.io/solved-by-flexbox/

# flex-layout-attribute

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self. 作者: StefanKovac https://github.com/StefanKovac/

演示: http://progressivered.com/fla/?d=0&v=1&h=1&s=0&i=000&a=000#playground

# flex-layout

基于flexbox的栅格化布局库，提供更直观、丰富的布局方式。

作者: Coffcer https://github.com/Coffcer/

演示: http://coffcer.github.io/flex-layout/

# sass-flex-mixin

This is a set of mixins for those who want to mess around with flexbox using the native support of current browsers.

作者: mastastealth https://github.com/mastastealth

# flexbugs

A community-curated list of flexbox issues and cross-browser workarounds for them.

作者: philipwalton https://github.com/philipwalton/

# 其他

• https://github.com/fclaussen/Flexbox-Framework
• https://github.com/callmenick/Flexbox-Examples
• https://github.com/amfe/lib-flexible
• https://github.com/chadchristensen/flexbox
• http://flexbox.io/
• https://g.alicdn.com/mui/flex/3.0.8/flex.css
• https://github.com/ProLoser/Flexbox.less
• https://github.com/annebosman/FlexboxLess
• https://gist.github.com/jayj/4012969
• https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
• https://github.com/jonathantneal/flexibility
• 移动端开发小记 - Flexbox
• flexbox：更加优雅的Web布局
• https://www.w3ctrain.com/2015/11/12/visual-guide-to-css3-flexbox-flexbox-playground/ 图解CSS3 Flexbox属性
• [译]深入了解 Flexbox 伸缩盒模型
• mobile H5布局大全-rem flexbox详解

# lib-flexible

• 手机淘宝的flexible设计与实现
• 移动端H5页面rem缩放方案flexible.js兼容375px方案的思路
• 流云诸葛 基于淘宝弹性布局方案lib-flexible的问题研究
• 淘宝flexiblejs用rem,为什么还要缩放viewport?
• 理解flexible.js所需的viewport知识
• https://segmentfault.com/a/1190000007701921
• 移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
• 淘宝的flexible适配方案为什么只对iOS进行dpr判断，对于Android始终认为其dpr为1？
• 使用Flexible实现手淘H5页面的终端适配
• rem 产生的小数像素问题
• 如何看待手机天猫首页改用 flex 布局？与手机淘宝首页的 Rem 方案相比有何优缺点？

# 相关问题

• Flexbox and Textarea #85
• Flexbox doesn't work with buttons
• Flexbox stretch textarea in column
• Flexbox not working on button or fieldset elements

# submodule

# 更新

# https://blog.devtang.com/2013/05/08/git-submodule-issues/
$ git submodule foreach git submodule update
# https://www.jianshu.com/p/9000cd49822c
$ git submodule update --remote

# 综合

• 18个学习 flexbox 的优质资源

# 更新日志

2016-11-23

• 添加sass-flex-mixin,flexbugs,其他相关的flex资源
• 添加lab

2016-11-22

• 初始化版本
• 添加目录

声明： 版权归原作者所有