<!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{
width: 800px;
border: 2px solid red;
line-height: 100px;
text-align: center;
/* 设置元素为弹性容器 */
display: flex;
/* justify-content 分配主轴上的空白空间
flex-start 元素沿主轴起边排列
flex-end 元素沿主轴的终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-evenly 空白分布到元素的单侧
space-between 空白均匀分布到元素间 */
justify-content: space-between;
}
.outer div{
width: 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>