你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到...
分类：
其他好文 时间：
2016-01-27 14:38:42
阅读次数：
149
本文转载自阮一峰,介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个...
分类：
其他好文 时间：
2016-01-24 10:23:23
阅读次数：
160
在知乎上看到手写div布局的问题就自己动手做了一些尝试，用了两种方法：1)死做；2)Flexbox方法一：(死做) 1 2 3 4 5 6 distributionTest 7 90 91 ...
分类：
其他好文 时间：
2016-01-23 00:54:55
阅读次数：
164
使用 Flexbox 的牛逼布局.container { display: -webkit-flex; display: flex;}.initial { -webkit-flex: initial; flex: initial; width: 200px; min-wi...
分类：
其他好文 时间：
2016-01-02 14:13:47
阅读次数：
145
.flex-container{ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-fle...
分类：
其他好文 时间：
2015-12-05 21:02:25
阅读次数：
193
一、弹性盒模型介绍1、弹性盒模型介绍—基础知识 弹性盒模型（FlexibleBox或Flexbox）是一个CSS3新增布局模块，官方称为CSSFlexibleBoxLayoutModule，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）。弹性盒模型最大的特性在于，能够动....
分类：
Web程序 时间：
2015-12-02 14:34:07
阅读次数：
489
display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -moz-flex;display: -ms-flexbox;display: flex;/* 水平居中*/-webkit-box-align: center;...
分类：
Web程序 时间：
2015-12-02 14:31:30
阅读次数：
140
注：今天在用swiper.js做商品轮播图的时候，遇到了在使用flexbox的前提下，子元素设置flex:1;所有子元素被挤在一期的现象（未执行到swipe）；原因竟然是因为没有设置：flex-shrink属性。flex-shrink：默认值：1适用于：flex子项继承性：无动画性：是计算值：指定值...
分类：
其他好文 时间：
2015-11-30 13:00:25
阅读次数：
152
Flexbox通常能让我们更好的操作他的子元素布局，例如：如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；可以快速让他们布局在一列；可以方便让他们对齐容器的左、右、中间等；无需修改结构就可以改变他们的显示顺序；如果元素容器设置百分比..
分类：
Web程序 时间：
2015-11-10 14:17:13
阅读次数：
269
竖向居中需要一个父元素和一个子元素合作完成。 Blah blah Blah blah blah blah blah ... …但为了让子元素竖向居中，你只需要对父元素施加CSS样式：.flexbox-container { display: -ms-flexbox; display: -webki....
分类：
Web程序 时间：
2015-11-04 19:09:31
阅读次数：
171
