页面布局仍然是 Web 应用程序样式设计的重点
我们的传统布局形式基于盒子模型
使用显示、位置和浮动进行布局具有一定的限制
例如，实现自适应垂直居中
随着响应式布局的普及，CSS3 引入了越来越灵活的灵活布局模型
灵活的布局
使用灵活的布局有效地为容器分配空间
即使我们的容器元素规格发生变化
其中的元素也可以调整以适应空间
如果要将元素制作成弹性框
很简单
<pre class="brush:css;toolbar:false;">.demo { /*块级元素*/
display: flex;}
.demo { /*行级元素*/
display: inline-flex;}
设置 flex 布局后，子元素的浮动、清除和垂直对齐属性将失效
举一个小反例
1
2
3
.flex-box { width: 500px; height: 100px; border: 1px solid black;}.flex-item { width: 100px; height: 100px; font-size: 80px; line-height: 100px; text-align: center;}.flex-item:nth-child(1) { background-color: lightseagreen;}.flex-item:nth-child(2) { background-color: violet;}.flex-item:nth-child(3) { background-color: cornflowerblue;}
通常，子元素 p 默认填充一整行，因此它们只能水平排列
现在我们使用灵活的布局
.flex-box { display: flex; /*增*/
width: 500px; height: 100px; border: 1px solid black;}
我们注意到子元素在父元素中呈现行排列
看起来好像子元素应用了浮动浮点
但这个属性远非简单
它才刚刚开始（⊙▽⊙）。
相关概念
在讨论这些属性之前，让我们看一些基本概念
设置弹性布局的元素称为“弹性容器”，简称为“容器”
它的子元素，称为“弹性项目”，简称为“项目”
在这里我介绍一张图片（原谅我的盗窃，我懒得画.
容器中有两个垂直坐标轴
水平的称为主轴
垂直的称为十字轴主轴
的左右两侧分别称为主轴起点和主轴端横轴
上方和下方分别称为横轴起点和横轴终点
“项目”也有两个名词
每个项目的宽度和高度称为主轴规格和交叉轴规格
这次我们可以理解为什么子元素在使用灵活布局后呈现行排列
物品沿着容器中的主轴排列
容器属性
弹性框布局“容器”具有以下属性
柔性方向
我们可以使用弹性方向来指定主轴的方向，从而改变项目的排列方向
房产价值：
.flex-box { display: flex; width: 500px; height: 100px; border: 1px solid black; flex-direction: row-reverse; /*增*/}
其他属性也没有太多解释，很容易理解
此图像分别对应于列反转、列、行、行反转
柔性包装
默认情况下，弹性框的项目排列在轴上
这样，如果有很多项目，它将“弹性”压缩在一行中
例如，我添加更多项目
我没有更改项目的宽度
但是，由于弹性框中的项目太多，因此这些项目在主轴上被压缩
现在添加弹性换行属性
.flex-box { ......
flex-wrap: wrap; /*增*/}
弹性包装：包装允许我们指定当容器“无法容纳”物品时是否包装
属性值如下所示：
我们理解了前两个
第三个属性值是换行-反向
包装好的物品首先排成一排，像这样
柔性流柔性
流是柔性方向和柔性缠绕的复合特性
这两个属性都是必需的
我不会解释太多
证明内容
两端对齐内容属性定义项目在主轴上的对齐方式
属性值如下所示：
灵活启动 ：
弹性端：
中心：
之间的空格：
空间周转：
对齐项对齐项
属性定义项在交叉轴上的对齐方式
属性值如下所示：
弹性启动：
弹性端：
中心：
基线：
对齐内容对齐
内容属性定义多个网格的对齐方式
仅当容器具有多个心轴，而一个心轴不是
类似于两端内容属性
属性值如下所示：
弹性启动：
弹性端：
中心：
之间的空格：
空间周转：
项目属性
弹性框布局“项目”具有以下属性
次序顺序
允许我们自定义项目的排列顺序
默认值为0，属性值为数字，数字越小，前面越高
有点类似于我们优先级队列中的优先级
.flex-item:nth-child(1) { ......
order: 99;}.flex-item:nth-child(2) { ......
order: -1;}.flex-item:nth-child(3) { ......
}
灵活生长
弹性增长定义项目的放大列
默认为0，即如果不占据容器整行，则不要放大项目，就像上一张图片一样
.flex-item:nth-child(1) { ......
flex-grow: 1; <--
}
.flex-item:nth-child(2) {
......
flex-grow: 2; <--
}
.flex-item:nth-child(3) {
......
flex-grow: 3; <--
}
这相当于三个项目将剩余空间“切割”成6块项目 1
拿了 1 件css3弹性盒模型，项目 2 拿了
2 件，项目 3 拿了 3 件
柔性收缩
弹性收缩定义项目的缩小列
默认值为 1，表示如果没有足够的空间，该项目将按相等的比例减少
通过这个属性，我们可以控制每个项目收缩的比例
.flex-item:nth-child(1) { ......
flex-shrink: 1; <--
}
.flex-item:nth-child(2) {
......
flex-shrink: 2; <--
}
.flex-item:nth-child(3) {
......
flex-shrink: 3; <--
}
这会将项目的比例降低到 1：2：3
这保证了所有物品的总长度和容器的长度相等
弹性基础
弹性基础定义项目在分配多余空间之前抢占的主轴空间
默认自动是项目的原始长度
我们可以自动设置宽度
.flex-item:nth-child(1) { ......
flex-basis: 150px; <--
}
.flex-item:nth-child(2) {
......}.flex-item:nth-child(3) { ......
}
屈柔性
是弹性生长、柔性收缩、柔性基础的复合特性
默认值：0 1 auto，最后两个属性可选
您可以编写关键字：自动（1 1 自动）和无（0 0 自动）。
对齐自我
align-self 属性允许某些项目具有唯一的对齐方法
这将覆盖对齐项设置的对齐属性
默认值为 autocss3弹性盒模型，它继承弹性容器的对齐项属性的值
属性值不仅是自动的，而且与对齐项一样，它们没有太多解释
.flex-box { ......
align-items: center;}.flex-item:nth-child(2) { ......
align-self: flex-end;}
这就是弹性框的所有属性
事实上，这是最新的句型
在此之前，浏览器的实现不一致，因此最好理解一下
来源 |
CSS3灵活可扩展布局简介
2009年，W3C提出了一种全新的解决方案——Flex布局（即弹性、可扩展的布局），它可以以简单、完整、响应式的方式实现各种页面布局，包括仍然令人不舒服的垂直和水平居中。 似乎很容易解决。
但这种布局形式目前还处于W3C的草案阶段，而且还分为旧版本、新版本和混合过渡版本三种不同的编码形式。
其中，混合过渡版本主要兼容IE10。
目前移动端的布局多采用flex布局，所以这次主要讲解一下旧版本和新版本在移动端使用到的各个知识点，方便大家熟悉神秘的弹性布局。
旧版（盒装）
首先看浏览器兼容性：
PS：浏览器兼容性数据可能不是很准确，但差别不大。
下面通过一个简单的例子来解释一下旧版本的各个属性：
html代码：
发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给
发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给
发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划
可以看到我们的例子很简单，一个div元素包含了三个p元素，而且它们都是块元素（block）。 接下来，为段落添加一些基本样式：
p{width:150px;border:3px solid lightblue;background:lightgreen;padding:5px;margin:5px;}
此时刷新页面可以看到这样的结果：
这个结果很正常！ 好的，现在我们将 div 元素设置为一个盒子，看看有什么变化：
div{display:-webkit-box;display:box;}
我们再次刷新页面，结果是这样的：
看到了吧css3 弹性布局，现在每个p元素都被做成了一个盒子，这就是弹性布局的神奇之处！
里面我们将div元素的显示设置为box，也就是老版本的弹性布局。 对于较旧的浏览器版本，我们需要添加 -webkit- 前缀。
旧版本的flex布局有两个属性值：
PS：我们知道块级占据整行，比如div元素； 而内联级别则不会占据整行，例如span元素。 但我们把整个袋子装起来，他们不占用，保持一致。 就像我们的例子，如果给div元素设置了一个bagcss3 弹性布局，那么div元素上面的p元素就不会被占用。
下面介绍一下老版本弹性布局的各种属性：
面向盒子的属性
box-orient属性主要实现包内元素的流向。
div{display:-webkit-box;display:box;-webkit-box-orient:vertical;box-orient:vertical;}
此时的结果是垂直对齐：
该属性的属性值为：
你不妨尝试一下：horizontal和inline-axis水平排列，而vertical和block-axis垂直排列。
盒子方向属性
box-direction属性主要是设置柔性容器中的流动顺序。
div{display:-webkit-box;display:box;-webkit-box-direction:reverse;box-direction:reverse;}
这样我们的排序就逆序了，运行结果为：
该属性的属性值为：
盒装属性
box-pack 属性用于调整项目的分布。
该属性的属性值为：
我们来试试各个属性值的疗效：
1.起始属性值
div{-webkit-box-pack:start;box-pack:start;}
这是默认的对齐形式：
2.结束属性值
div{-webkit-box-pack:end;box-pack:end;}
这与终点对齐：
3.中心属性值
div{-webkit-box-pack:center;box-pack:center;}
这是中心对齐效果：
4. 证明属性值合理
div{-webkit-box-pack:justify;box-pack:justify;}
这是平均分布效应：
PS：垂直方向的原理是一样的，但是如果高度是auto的话，效果就出不来了。 所以需要为height设置一个固定的高度（最好比默认的高）。 这时候就可以看到垂直方向的疗效了。 这里我就不重复了。
框对齐属性
box-align 属性用于处理 Flex 容器的额外空间。
该属性的属性值为：
再次，我们将测试每个属性值的效果：
1.起始属性值
div{display:-webkit-box;display:box;-webkit-box-align:start;box-align:start;}
效果如下：
2.结束属性值
div{display:-webkit-box;display:box;-webkit-box-align:end;box-align:end;}
效果如下：
3.中心属性值
div{display:-webkit-box;display:box;-webkit-box-align:center;box-align:center;}
效果如下：
4.基线属性值
如果盒子方向是内联单轴或垂直，则所有子元素都与其基线对齐。
div{display:-webkit-box;display:box;-webkit-box-orient:horizontal;box-orient:horizontal;-webkit-box-align:baseline;box-align:baseline;}
效果如下：
如果盒子方向是块轴或垂直，则所有子元素将居中并垂直对齐。
div{display:-webkit-box;display:box;-webkit-box-orient:vertical;box-orient:vertical;-webkit-box-align:baseline;box-align:baseline;}
效果如下：
5.拉伸属性值
所有子元素都会拉伸以填充包含块。
div{display:-webkit-box;display:box;-webkit-box-align:stretch;box-align:stretch;}
效果如下：
盒子弹性属性
box-flex 属性可以使用浮点数来指定弹性项目的比例。 该属性是为容器中的项目设置的，它们将根据父容器的长度分配其比例列：
p:nth-child(1){-webkit-box-flex:1;box-flex:1;}p:nth-child(2){-webkit-box-flex:3;box-flex:3;}p:nth-child(3){-webkit-box-flex:1;box-flex:1;}
效果如下：
当然，有些项可以是固定长度，其他项也会分配剩余长度。 例如，这里的第一个p元素设置为固定长度：
p:nth-child(2){-webkit-box-flex:2;box-flex:2;}p:nth-child(3){-webkit-box-flex:1;box-flex:1;}
效果如下：
更多的使用场景，大家可以自己慢慢尝试。
框序数组属性
box-ordinal-group属性可以设置灵活项的显示位置。
p:nth-child(1){-webkit-box-ordinal-group:2;box-ordinal-group:2;}p:nth-child(2){-webkit-box-ordinal-group:3;box-ordinal-group:3;}p:nth-child(3){-webkit-box-ordinal-group:1;box-ordinal-group:1;}
效果如下：
可以看出，第一个p元素排名第二，第二个p元素排名第三，第三个p元素排名第一。 可以单独为某个p元素设置该属性，其他项会按照原来的顺序改变。
OK，那么旧版本的所有属性就简单介绍一下，更多的组合用法还是需要自己去练习。
这是水平和垂直居中的示例：
div{display:-webkit-box;display:box;height:500px;border:1px solid #f00;-webkit-box-pack:center;box-pack:center;-webkit-box-align:center;box-align:center;}
那么效果是这样的：
此时我们为p元素设置固定的高度：
p{width:150px;height:200px;}
那么此时的疗效为：
达到这些疗效是不是很容易啊！
概括
好了，至此，旧版弹性布局的基础知识点就介绍完了。
文章结束
发表评论