<style> #first{ display: flex; justify-content:space-between; } li{ list-style-type:none ; border: 1px solid #999; width: 150px; height: 50px; line-he ...
分类：
Web程序 时间：
2018-07-18 19:13:01
阅读次数：
180
最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式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
CSS 入门教程六分之三篇 没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333 要点|解释 | 引用|如何使用定义的CSS样式方式 选择器|指明被定义样式的标签 属性|样式定义时具体定义的内容 定位|如何将标签放置到具体 ...
分类：
Web程序 时间：
2018-07-12 00:27:58
阅读次数：
256
一 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
