<html>
<head>
<style type=‘text/css‘>
.parent{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.blue{
background-color: blue;
}
.coral{
background-color: coral;
}
.box{
/* flex:1 1 150px; */
flex:0 1 150px;
margin: 5px;
}
</style>
</head>
<body>
<div class="parent blue">
<div class="box coral">1</div>
<div class="box coral">2</div>
<div class="box coral">3</div>
</div>
</body>
</html>
设置了150px作为最小值，三个box三分parent区域，跟随着浏览器的大小的改变而改变，当浏览器缩小到一定程度时，浏览器无法改变，相当于确定了浏览器的最小窗体大小。
<head>
<style type=‘text/css‘>
.parent{
display: grid;
place-items: center;
resize: both;
overflow: auto;
}
.blue{
background-color: blue;
}
.coral{
background-color: coral;
}
</style>
</head>
<body>
<div class="parent blue">
<div class="box coral" contenteditable>
:)
</div>
</div>
</body>
鼠标拖拽外面的parent框的右下角改变parent的大小，里面的框是垂直水平居中，且能改变框中文字的值。
原文：https://www.cnblogs.com/tellw/p/13284978.html