高考活动页面需要在一个页面容器中,实现一个两行三列宽度自适应缩放,且图片等比例缩放,随着浏览器宽度进行自适应缩放的布局。 中间的图片需要自适应,随着页面宽度的变化,三等分缩放,图片等比例缩放。页面地址
解决思路:
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;
}
加上一些可以区分的背景和线框之后如图:
随着页面的缩放,始终未三等份。
.father {
width: 100%;
padding-bottom: 100%;
display: grid;
grid-template-rows: repeat(3, 33.3%);
grid-template-columns: repeat(3, 33.3%);
}
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;
}