http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
容器设置
新版的为display为flex 老版的为display为webkit-box；
布局方向 老版的布局方向
flex-direction: row; -webkit-box-orient: horizontal;
flex-direction: column; -webkit-box-orient: vertical;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
/*x排列*/
flex-direction: column;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body><div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/* x排列*/
-webkit-box-orient: vertical;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body><div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
老版容器排列方向
-webkit-box-direction: normal;
-webkit-box-direction: reverse;
（注意:项目永远是沿着主轴的正方向排列的）
-webkit-box-direction属性本质上改变了主轴的方向
新版
flex-direction:row-reverse;
flex-direction:column-reverse;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: reverse;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
老版
富裕空间的管理（主轴）
start
end
center
justify
-webkit-box-pack:start; 不会给项目区分配空间，只是确定富裕空间的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: reverse;
/*
start 富裕空间在右边
end 富裕空间在左边
center 富裕空间在两边
justify 富裕空间在项目之间
*/
-webkit-box-pack: start;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: reverse;
/*
start 富裕空间在右边
end 富裕空间在左边
center 富裕空间在两边
justify 富裕空间在项目之间
*/
-webkit-box-pack: start;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
富裕空间的管理（侧轴）
start
end
center
-webkit-box-align:center; 不会给项目区分配空间，只是确定富裕空间的位置
新的
更强大的富裕空间的管理（主轴）
justify-content: flex-start;
flex-start
flex-end
center
space-between
space-around(box 没有的)
更强大的富裕空间的管理（侧轴）
align-items: stretch;
flex-start
flex-end
center
baseline(box 没有的)
stretch(box 没有的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
/*
flex-start 富裕空间在主轴的正方向
flex-end 富裕空间在主轴的反方向
center 富裕空间在主轴的两边
space-between 富裕空间在项目之间
space-around(box 没有的) 富裕空间在项目两边
*/
justify-content: space-around;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
/*
flex-start 富裕空间在主轴的正方向
flex-end 富裕空间在主轴的反方向
center 富裕空间在主轴的两边
space-between 富裕空间在项目之间
space-around(box 没有的) 富裕空间在项目两边
*/
justify-content: space-around;
/*
flex-start: 富裕空间在侧轴的正方向;
flex-end: 富裕空间在侧轴的反方向;
content: 富裕空间在侧轴的两边;
baseline(box 没有的) 按基线对齐
stretch(box 没有的) 等高布局
*/
align-items: stretch;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
老版old box弹性空间管理
弹性空间的管理：将富裕空间按比例分配到各个项目上
-webkit-box-flex: 1;
默认值:0 不可继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/*-webkit-box-orient控制主轴和侧轴分别是哪一根*/
-webkit-box-orient:horizontal;
/*-webkit-box-direction控制主轴方向*/
-webkit-box-direction: normal;
/*
start 富裕空间在右边（x） 下边（y）
end 富裕空间在左边 （x） 上边（y）
center 富裕空间在两边
justify 富裕空间在项目之间
*/
-webkit-box-pack: start;
/*
start 富裕空间在右边（x） 下边（y）
end 富裕空间在左边 （x） 上边（y）
center 富裕空间在两边
*/
-webkit-box-align:start;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
/*
* 弹性空间管理
* 将主轴上的富裕空间按比例分配到项目上!
*
* */
-webkit-box-flex: 1;
}
#wrap > .item:nth-child(1){
-webkit-box-flex: 4;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
新版本 flex 弹性空间管理
flex-grow: 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
/*
flex-start 富裕空间在主轴的正方向
flex-end 富裕空间在主轴的反方向
center 富裕空间在主轴的两边
space-between 富裕空间在项目之间
space-around(box 没有的) 富裕空间在项目两边
*/
justify-content: space-around;
/*
flex-start: 富裕空间在侧轴的正方向;
flex-end: 富裕空间在侧轴的反方向;
content: 富裕空间在侧轴的两边;
baseline(box 没有的) 按基线对齐
stretch(box 没有的) 等高布局
*/
align-items: stretch;
}
#wrap > .item{
50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
flex-grow: 1;
}
#wrap > .item:nth-child(1){
flex-grow: 4;
}
</style>
</head>
<body>
<div id="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>