弹性盒模型：css3引入了新的盒子模型。官方称为CSS Flexible Box Layout Module，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）
弹性盒模型写法：display: flex; 写在父级元素上，使下面的子级产生变化
弹性盒模型需要了解什么是主轴什么是侧轴，下面有一张图
image002.jpg
主轴就是决定元素是怎样的排列方式 水平排列还是垂直排列
flex-direction:主轴方向设置(row/row-reverse/column/column-reverse)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box {
height: 500px;
border: 2px solid #000;
display: flex;
flex-direction：row;
}
#box div {
width: 100px;
height: 100px;
background: Red;
border: 2px solid #000;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>\
</div>
</body>
</html>
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
1.png
justify-content:主轴对齐(flex-start/flex-end/center/space-between/space-around)
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。
2.png
align-items: 侧轴对齐(flex-start/flex-end/center)
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
3.png
flex-wrap: 换行(nowrap/wrap/wrap-reverse);
nowrap（默认）：不换行。当子元素超出边框也不会换行继续显示，元素没有设置宽度，元素会平均分配宽度
wrap：换行，第一行在上方。
bg2015071008.jpg
wrap-reverse：换行，第一行在下方。
bg2015071009.jpg
主轴为row或者row-reverse 默认侧轴为 从上到下 如果添加了wrap-reverse 侧轴方向为从下到上
主轴为column或者column-reverse 默认侧轴为 从左到右 如果添加了wrap-reverse 侧轴方向为从右到左
align-content 行对齐:(flex-start/flex-end/center/space-between/space-around)
效果和侧轴对齐用法一样，有多行的情况下用行对齐，单行的情况则用侧对齐
子元素的样式设置
flex: number|auto|none;
元素的尺寸= 元素的flex/flex之和*父级剩余宽度
#box {
height: 200px;
border: 2px solid #000;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#box div {
width: 100px;
height: 100px;
background: Red;
border: 2px solid #000;
color: #fff;
/* flex: auto; */
}
#box div:nth-of-type(1){
flex: 1;
}
#box div:nth-of-type(2){
flex: 2;
}
#box div:nth-of-type(3){
flex: 3;
}
#box div:nth-of-type(4){
flex: 4;
}
#box div:nth-of-type(5){
flex: 5;
order:-1
}
每个元素的显示宽度
QQ截图20170423214850.png
order 排序: 数值越大越往后排
默认值 0，可接受负值
align-self( auto | flex-start | flex-end | center)
bg2015071016.png
以上就是弹性盒模型的用法，不过除了flex 因为兼容性的原因 还有老版的写法 需要在不同的内核下添加前缀来使用
display:box; display:inline-box;
老版本在使用的时候需要加前缀：
display: -webkit-box;
内嵌不会像新版变成块级，没有换行 块级元素在一行显示
写法不一样外 下面的功能对比新版都是差不多的
box-orient 定义主轴方向 (horizontal|vertical)
box-direction 定义元素的排列顺序(normal|reverse )
box-pack: 主轴方向富裕空间管理(start|center|end|justify )
box-align: 侧轴(垂直于主轴的方向)方向富裕空间管理(start|center|end)
box-flex 定义子元素的弹性尺寸
box-ordinal-group 定义子元素的排列顺序
1.最小值1
2.默认值大小为1
3.数值越大排列越靠后
-end-
网友评论