<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
300px;
border: 2px solid red;
line-height: 100px;
text-align: center;
/* 设置元素为弹性容器 */
display: flex;
/* 设置弹性元素是否在弹性容器中自动换行
可选值: nowrap 默认值 元素不会自动换行
wrap 元素沿辅轴方向自动换行*/
flex-wrap: nowrap;
/* 弹性元素在容器中反向水平排列
可选值：row 默认值 水平排列 从左到右 根据国家的书写习惯而定
row-reverse 弹性元素在容器中反向水平排列
column 弹性元素纵向排列(自上向下)
column-reverse 弹性元素 反向纵向排列(自下向上)*/
flex-direction: column-reverse;
}
.outer div{
200px;
height: 100px;
background-color: burlywood;
/* 指定弹性元素的收缩系数
0表示不收缩 */
/* flex-shrink: 0; */
}
.outer .box2{
background-color: chartreuse;
}
.outer .box3{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
</div>
</body>
</html>