本文内容参考自如何用一行 CSS 分别实现 10 种现代布局？。
1.可解构的自适应布局(The Deconstructed Pancake)
<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区域，跟随着浏览器的大小的改变而改变，当浏览器缩小到一定程度时，浏览器无法改变，相当于确定了浏览器的最小窗体大小。
2.超级居中
<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的大小，里面的框是垂直水平居中，且能改变框中文字的值。