弹性盒模型-主轴方向设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
#box{
height: 200px;
border: 1px solid #000;
/*新版弹性盒模型*/
/*display: flex;*/
/*设置主轴方向为水平方向*/
/*flex-direction: row;*/
/*设置主轴方向为竖直方向*/
/*flex-direction: column;*/
/*老版弹性盒模型*/
display: -webkit-box;
/*设置主轴方向为水平方向*/
-webkit-box-orient: horizontal;
/*设置主轴方向为竖直方向*/
-webkit-box-orient: vertical;
}
#box div{
width: 50px;
height: 50px;
background-color: #f00;
font-size: 40px;
color: #F5F5F5;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
/设置主轴方向为水平方向,元素排列为反序/
display: flex;
flex-direction: row-reverse;
/*设置主轴方向为竖直方向,元素排列为反序*/
flex-direction: column-reverse;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
==============================================
注意webkit内核必须加-webkit-前缀
第一个属性是 flex-direction 是确定主轴的方向
row：主轴方向是水平 从左到右。
column：主轴方向是垂直 从上到下。
row-reverse: 与row相反
column-reverse： 与colunmn相反
第二个属性是flex-wrap 有三个值 wrap nowrap wrap-reverse
wrap 换行 第二行在下面。
nowrap 不换行
wrap-reverse 换行第二行在上面。
第三个 justify-content属性 主要是主轴上对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
第四个属性：align-items 与 justify-content 属性相似 是在交叉轴上对其方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
第五个属性：align-conent 是多个轴线等情况下
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
新版弹性盒子模型
flex-grow: 1;
老版弹性盒子模型
-webkit-box-flex: 1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
#box{
height: 300px;
border: 1px solid #000;
/*新版弹性盒子模型*/
/*display: flex;*/
/*老版弹性盒子模型*/
display: -webkit-box;
}
#box div{
/*新版弹性盒子模型*/
/*flex-grow: 1;*/
/*老版弹性盒子模型*/
-webkit-box-flex: 1;
height: 50px;
background-color: #f00;
font-size: 30px;
color: #fff;
}
#box div:nth-of-type(2){
flex-grow: 2;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
元素具体位置设置：
老版
display: flex;
order:数值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
#box{
height: 300px;
border: 1px solid #000;
display: flex;
}
#box div{
width:50px;
height: 50px;
background-color: #f00;
font-size: 30px;
color: #fff;
}
#box div:nth-of-type(1){
/*数值越小越靠前,可以接受0或者负数值*/
order: 5;
}#box div:nth-of-type(2){
order: 2;
}
#box div:nth-of-type(3){
order: 3;
}
#box div:nth-of-type(4){
order: 4;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
新版
display: -webkit-box;
-webkit-box-ordinal-group: 1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
#box{
height: 300px;
border: 1px solid #000;
display: -webkit-box;
}
#box div{
width:50px;
height: 50px;
background-color: #f00;
font-size: 30px;
color: #fff;
}
#box div:nth-of-type(1){
/*数值越小越靠前，最小默认值处理为1*/
-webkit-box-ordinal-group: 5;
}#box div:nth-of-type(2){
-webkit-box-ordinal-group: 2;
}
#box div:nth-of-type(3){
-webkit-box-ordinal-group: 3;
}
#box div:nth-of-type(4){
-webkit-box-ordinal-group: 4;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
原文：https://blog.csdn.net/q970654226/article/details/80500128