背景：移动端实现九宫格，宽度自适应，高度等于宽度。
第一版本：不考虑九宫格输入内容
html
<div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>css
.flex { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; } .item { width: 30%; border: 1px solid #ccc; box-sizing: border-box; padding-top: 30%; height: 30%; margin-top: 3%; }由于父元素没有高度，高度是由内部元素撑开，如何做到内部元素宽高比为 1 ：1，想到了给padding 设置百分比，当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！给每个单元格设置padding-top：30%，也就是父元素宽度的 30%， 这样实现了单元格宽高比为 1 ：1。如图：
当九宫格内需要输入内容，则单元格被内容撑开，宽高不等。换种思路，给单元格的父元素设置 padding-top：100%，使父元素宽高 1 : 1，单元格再等分，于是有了第二版。
第二版本：九宫格内输入内容
html
<div class="flex"> <div class="inner"> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div> </div>css
.flex { width: 100%; padding-top: 100%; position: relative; } .inner { display: flex; justify-content: space-around; align-content: space-around; flex-wrap: wrap; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: yellow; } .item { width: 30%; height: 30%; border: 1px solid #ccc; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
