标签：rect row ems nbsp 改变 class tar auto sel
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{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
/*x排列*/
flex-direction: column;
}
#wrap > .item{
width: 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{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:-webkit-box;
/* x排列*/
-webkit-box-orient: vertical;
}
#wrap > .item{
width: 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{
width: 400px;
height: 300px;
border: 1px solid;
margin:100px auto;
display:flex;
flex-direction: row-reverse;
}
#wrap > .item{
width: 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{
width: 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{
width: 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{
width: 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{
width: 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{
width: 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{
width: 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{
width: 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{
width: 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{
width: 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{
width: 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>
标签：rect row ems nbsp 改变 class tar auto sel
原文地址：https://www.cnblogs.com/hack-ing/p/11791502.html
