九宫格布局

Posted on | In
Words count in article: 873 | Reading time ≈ 3

九宫格布局
author: @TiffanysBear

需求背景

高考活动页面需要在一个页面容器中，实现一个两行三列宽度自适应缩放，且图片等比例缩放，随着浏览器宽度进行自适应缩放的布局。
中间的图片需要自适应，随着页面宽度的变化，三等分缩放，图片等比例缩放。页面地址

GitHub
GitHub

解决办法一：flex布局 + padding-bottom

解决思路：

  1. 使用flex弹性布局，使子元素成为容器成员
  2. 父元素使用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结构如下：

1
2
3
4
5
6
7
8
9
10
11
<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结构如下：

1
2
3
4
5
6
7
8
9
10
.wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.item {
    width: 33.3%;
    padding-bottom: 33.3%;
    box-sizing: border-box;
}

加上一些可以区分的背景和线框之后如图：

GitHub
GitHub

随着页面的缩放，始终未三等份。

解决办法二：使用网格grid布局

1
2
3
4
5
6
7
.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结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
    width: 300px;
    height: 300px;
    display: table;
    background: pink;

}
.item {
    display: table-cell;
}
.table-row {
    display: table-row;
    width: 300px;
}

解决办法四：使用table表格布局