CSS3 弹性盒子(Flex Box)
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>下面将通过一个简单的实例来讲解旧版本的各个属性：
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>上面结果 很正常，在看看下面的例子：
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
div{
display:-webkit-box;
display:box;
}
</style>
</head>
<body>
<div>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>看到了吧，现在每一个p元素都变成一个box了，这就是弹性布局的神奇所在！
在上面中，我们将div元素的display设置为box，这就是旧版本的弹性布局。对于比较旧的浏览器版本，我们需要加上-webkit-前缀。
旧版本的弹性布局有两个属性值：
box : 将容器盒模型作为块级弹性伸缩盒显示 inline-box : 将容器盒模型作为内联级弹性伸缩盒显示
PS：我们知道块级它是占用整行的，比如div元素；而内联级不占用整行，比如span元素。但是我们设置了整个盒子，他们都不占用，保持一致。就像我们上面的例子一样，给div元素设置了盒子，那么div元素里面的p元素就不占用了。
box-orient 属性
box-orient属性主要实现盒子内部元素的流动方向。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}此时的结果就是垂直排列：
此属性的属性值有：
horizontal ： 伸缩项目从左到右水平排列 vertical ： 伸缩项目从上到下垂直排列inline-axis ： 伸缩项目沿着内联轴排列显示block-axis ： 伸缩项目沿着块轴排列显示
大家不妨试一下：horizontal 和 inline-axis 都是水平排列，而vertical 和 block-axis 都是垂直排列。
box-direction属性
box-direction 属性主要是设置伸缩容器中的流动顺序。
div{
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
}此属性的属性值有：
normal : 正常顺序，默认值reverse : 反序
box-pack属性
box-pack 属性用于伸缩项目的分布方式。
此属性的属性值有：
start : 伸缩项目以起始点靠齐 end : 伸缩项目以结束点靠齐center : 伸缩项目以中心点靠齐justify : 伸缩项目平局分布
下面我们都试一下各个属性值的效果：
start属性值：
div{
-webkit-box-pack:start;
box-pack:start;
}2.end属性值：
div{
-webkit-box-pack:
end
;
box-pack:
end
;
}3.center属性值：
div{
-webkit-box-pack:
center
;
box-pack:
center
;
}4.justify属性值：
div{
-webkit-box-pack:
justify
;
box-pack:
justify
;
}PS:垂直方向上也是一样的原理，但如果height为auto的话，效果将出不来。所以需要给height设置一个定高（最好比默认情况高）。这时，就能看到在垂直方向上的效果了。这里我就不再赘述了。
box-align属性
box-align 属性用来处理伸缩容器的额外空间。
此属性的属性值有：
start ： 伸缩项目以顶部为基准，清理下部额外空间 end ： 伸缩项目以底部为基准，清理上部额外空间 center ： 伸缩项目以中部为基准，平均清理上下部额外空间baseline ： 伸缩项目以基线为基准，清理额外的空间stretch ： 伸缩项目填充整个容器，默认值
同样的，我们将试一下每个属性值的效果：
1.start属性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
}2.end属性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:
end
;
box-align:
end
;
}3.center属性值
div{
display:-webkit-box;
display:box;
-webkit-box-align:
center
;
box-align:
center
;
}4.baseline属性值
如果box-orient是内嵌单轴或横向，所有的子元素都置于他们的基线对齐。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baseline;
box-align:baseline;
}而如果box-orient是块轴或者垂直方向的，那么所有的子元素都将居中垂直排列。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
-webkit-box-align:baseline;
box-align:baseline;
}5.stretch属性值
所有子元素拉伸以填充包含区块。
div{
display:-webkit-box;
display:box;
-webkit-box-align:stretch;
box-align:stretch
;}box-flex属性
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 属性
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;
}CSS3 弹性盒子属性
下表列出了在弹性盒子中常用到的属性:
属性 描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。
我喜欢晴天
弹性盒子干啥用的
4年前 添加回复 0