<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* flex*/
/* section{
display:flex;
width: 21.3333rem;
height: 8rem;
background: pink;
margin: 0 auto;
}
section div:nth-child(1){
width: 2.6667rem;
height: 8rem;
background: red;
}
section div:nth-child(2){
flex: 1;
background: green;
}
section div:nth-child(3){
width: 2.6667rem;
height: 8rem;
background: blue;
} */
/* align-self*/
/* section{
display:flex;
width: 21.3333rem;
height: 8rem;
background: pink;
}
section div{
width: 2.6667rem;
height: 2.6667rem;
background: red;
margin-right: .1333rem;
}
section div:nth-child(3){
align-self:flex-end;
} */
/* order*/
section{
display:flex;
width: 21.3333rem;
height: 8rem;
background: pink;
}
section div{
width: 2.6667rem;
height: 2.6667rem;
background: red;
margin-right: .1333rem;
}
section div:nth-child(3){
order: -1;
}
</style>
<body>
<!--flex-flow-->
<!-- <section>
<div>1</div>
<div>2</div>
<div>3</div>
</section> -->
<!--align-self-->
<!-- <section>
<div>1</div>
<div>2</div>
<div>3</div>
</section> -->
<!--order-->
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<!--
设置子项分配剩余空间 用flex 来表示占多少份数
注意： 数字越大分配越多
flex:{
<number> 默认是 0
}
设置子项 单个项目与其他项目不一样的对齐方式
可以覆盖 aling-items 属性
默认值为 auto 表示继承父元素align-items属性
如果没有父元素，则等同于stretch
align-self:{
flex-end;
}
设置子项位置
注意：数字越小越靠前
order:{
-1 默认值 0
}
-->标签：flex,section,元素,height,width,background,rem,属性 From： https://www.cnblogs.com/zxh-bug/p/16712891.html