使用flex布局制作九宫格如何才能做到当窗口缩小后盒子固定不变
时间: 2024-01-05 11:03:30 浏览: 28
使用Flex布局制作九宫格时,可以使用flex-wrap属性来控制子元素的换行,同时使用flex-basis属性来控制子元素的宽度。如果想要实现在窗口缩小后,子元素的大小不变,可以设置flex-basis属性为一个固定的值,同时使用min-width和max-width属性来控制子元素的最小和最大宽度。具体实现方式如下:
HTML代码:
```
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex-basis: 100px;
min-width: 100px;
max-width: 100px;
height: 100px;
background-color: #f2f2f2;
border: 1px solid #ccc;
box-sizing: border-box;
margin: 10px;
}
```
在上面的代码中,将容器设置为flex布局,并使用flex-wrap属性控制子元素的换行。然后,将子元素的宽度设置为固定值,同时使用min-width和max-width属性来控制子元素的最小和最大宽度,这样在窗口缩小后,子元素的大小不变。