flex-direction 属性 flex-direction 用来来确定主轴的方向，从而确定基本的项目排列方向。 flex-direction 属性的取值及其含义： row（默认值）： 主轴为?平?向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方 ...
分类：
其他好文 时间：
2017-07-07 21:21:42
阅读次数：
161
弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。它可以用简单的方式满足很多常见的复杂的布局需求。 优势 开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。 该布局模型在主流浏览器中都得到了支持。 一、fle ...
分类：
其他好文 时间：
2017-07-06 14:23:15
阅读次数：
191
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏 ...
分类：
其他好文 时间：
2017-07-04 21:52:47
阅读次数：
126
概念： 弹性盒布局模型（Flexble Box Layout）是css3规范中提出的一种新的布局方式。他可以用简单的方式满足很多常见的布局需求。 基本概念： 采用flex布局的元素，称为flex容器，简称“容器”。他的所有子元素自动称为容器成员，称为flex项目，简称“项目”。 容器?默认存在两根轴 ...
分类：
其他好文 时间：
2017-07-03 23:45:24
阅读次数：
211
如图：①首先使用弹性盒子布局display:flex; flex-wrap:wrap; ②鼠标移上去出现“百度一下，你就知道了”，这句话之前带上各个网站的logo；③logo使用的是sprite，需要注意的是background-position使用的是负值(-) 整体代码如下： <!DOCTYPE ...
分类：
Web程序 时间：
2017-06-28 18:58:23
阅读次数：
193
使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度，而且可以随着浏览器的改变而改变。 改变元素的显示顺序 box-ordinal-group可以改变各个元素的显示顺序。 改变元素的排列方向 使用box-orient改变多个元素的排列方向。 元素宽度与高度的自适应 虽然使用盒布局时，元素的高 ...
分类：
Web程序 时间：
2017-06-28 18:56:41
阅读次数：
172
我们经常遇到这种需求： 在一个固定大小（固定比例）的容器里面展示图片，图片的大小比例都不是固定的，需要按容器的比例等比例缩图片上下左右居中显示。 在没有弹性盒子布局的年代，额的做法： 1：水平居中，非常好解决，容器 text-align: center; 2：垂直居中，容器display: tabl ...
分类：
其他好文 时间：
2017-06-24 19:42:37
阅读次数：
439
弹性盒模型： 【主轴方向设置】 新版弹性盒模型：display:flex; 设置主轴方向为水平方向：flex-direction: row; 设置主轴方向为垂直方向：flex-direction: column; 老版弹性盒模型：display: -webkit-box; 设置主轴方向为水平方向：- ...
分类：
移动开发 时间：
2017-06-23 19:30:34
阅读次数：
286
当我们在浏览浏览器的时候，经常会放大/缩小浏览器的显示比例，或者在不同的设备上。所处的分辨率也不尽同样。因此。我们须要学习一个新的知识：弹性盒模型。 弹性盒模型 实现项目对齐，方向，排序（即使项目大小位置动态生成），可以动态改动子元素的宽度和高度。具有良好的适配性。 如图就是弹性布局一个大概范围。 ...
分类：
Web程序 时间：
2017-06-22 13:27:37
阅读次数：
251
在css样式设计中有一个弹性盒属性，那什么是弹性盒呢？简单来说就是可以根据某些子元素设置的宽度或者是高度来自动为其他的子元素设置宽度和高度。 那么怎么将元素设置为弹性盒呢，答案就是将display:flex;样式设置在父元素上，记住是父元素上； 之后我们就要分配父元素剩余的空间了。我们就要将-(相应 ...
分类：
其他好文 时间：
2017-06-11 21:16:55
阅读次数：
174
