弹性盒模型

2017-04-23 本文已影响108人一刀一个小黄鱼

弹性盒模型：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-