九宫格布局
需求背景
高考活动页面需要在一个页面容器中，实现一个两行三列宽度自适应缩放，且图片等比例缩放，随着浏览器宽度进行自适应缩放的布局。 中间的图片需要自适应，随着页面宽度的变化，三等分缩放，图片等比例缩放。页面地址
解决办法一：flex布局 + padding-bottom
解决思路：
- 使用flex弹性布局，使子元素成为容器成员
- 父元素使用flex-wrap: wrap;将flex 元素 被打断到多个行中
CSS flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。取值如下： nowrap flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction 的值 相当于 start 或 before。 wrap flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。 wrap-reverse 和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
3、巧妙使用padding-bottom，为子元素设置高度
padding-bottom 属性设置元素的下内边距（底部空白），因为padding-bottom计算的基准值是以父元素的宽度来进行的。 该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负内边距值。 值 描述 length 规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。 % 定义基于父元素宽度的百分比下内边距 inherit 规定应该从父元素继承下内边距
html结构如下：
<div class="wrap">
<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结构如下：
.wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.item {
width: 33.3%;
padding-bottom: 33.3%;
box-sizing: border-box;
}加上一些可以区分的背景和线框之后如图：
随着页面的缩放，始终未三等份。
解决办法二：使用网格grid布局
.father {
width: 100%;
padding-bottom: 100%;
display: grid;
grid-template-rows: repeat(3, 33.3%);
grid-template-columns: repeat(3, 33.3%);
}解决办法三：使用table-cell布局
div结构如下：
<div class="father">
<div class="table-row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="table-row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="table-row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>css样式如下：
.father {
width: 300px;
height: 300px;
display: table;
background: pink;
}
.item {
display: table-cell;
}
.table-row {
display: table-row;
width: 300px;
}