弹性盒模型

弹性盒模型：css3引入了新的盒子模型。官方称为CSS Flexible Box Layout Module，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）

弹性盒模型写法：display: flex; 写在父级元素上，使下面的子级产生变化
弹性盒模型需要了解什么是主轴什么是侧轴，下面有一张图

image002.jpg

主轴就是决定元素是怎样的排列方式 水平排列还是垂直排列

flex-direction:主轴方向设置(row/row-reverse/column/column-reverse)

    
1
    
2
    
3
    
4
\

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-