前几天看了阮一峰的Flex布局教程，讲的很不错，总结一下,有兴趣的可以去看原文http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一 Flex布局？ Flex全名Flexible Box即弹性布局， 基本用法：display:flex; ...
分类：
其他好文 时间：
2018-07-23 18:02:06
阅读次数：
179
需求： 两边栏固定宽度，中间宽度自适应，一般左边栏为导航，右边栏为广告，中间栏为主要内容的展示，div块上中间栏放在第一位，重要的东西放在文档流前面可以优先渲染。 圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。首先中间栏width 100%后，左右栏被挤在第二 ...
分类：
其他好文 时间：
2018-07-18 20:40:07
阅读次数：
119
最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex 编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的 ...
分类：
Web程序 时间：
2018-07-18 14:18:44
阅读次数：
153
资料来源于阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那 ...
分类：
其他好文 时间：
2018-07-18 13:51:02
阅读次数：
158
使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置 ...
分类：
其他好文 时间：
2018-07-14 19:29:41
阅读次数：
1161
只要在父元素放上display:flex(flex布局) align-items:center 垂直居中 justify-content:center 垂直居中 欢迎进群:822162679 ...
分类：
Web程序 时间：
2018-07-13 14:02:09
阅读次数：
196
盒子变成弹性盒子 display:flex; 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 flex容器 flex布局图 flex六个属性 1.flex-direction 决定主轴的方向 flex-direction:row | row-reverse ...
分类：
Web程序 时间：
2018-07-13 12:09:57
阅读次数：
179
一 flex布局这些是有顺序的，左右顶齐，均分空隙： display: flex; display: -ms-flexbox; display: -webkit-box; justify-content: space-between; -ms-flex-pack: space-between; -w ...
分类：
其他好文 时间：
2018-07-11 20:06:41
阅读次数：
143
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; ...
分类：
其他好文 时间：
2018-07-11 12:19:26
阅读次数：
177
前言 更多参考MDN flex布局 正文 1.Flexbox模型 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。 交叉轴（cross axis）是垂直于 flex 元素放置方向 ...
分类：
其他好文 时间：
2018-07-10 23:44:56
阅读次数：
364
