【前端】CSS3弹性布局（flex）、媒体查询实现响应式布局和自适应布局
.container {
display: flex; /* 定义弹性容器 */
flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; /* 子元素间隔均匀分布 */
}
.item {
flex-basis: 48%; /* 默认基础宽度 */
margin: 0.5%; /* 子元素外边距 */
min-width: 280px; /* 最小宽度，防止过度缩小 */
}
/* 媒体查询：根据屏幕宽度调整布局 */
@media (max-width: 600px) {
.item {
flex-basis: 100%; /* 子元素宽度自适应 */
}
}这段代码使用了CSS3的弹性布局(flexbox)来创建一个响应式的布局系统。.container 是一个弹性容器，其中的 .item 子元素可以根据屏幕宽度的变化而改变其宽度，从而实现自适应布局。同时，媒体查询(media query)用于定义在屏幕宽度小于600px时如何调整布局，使得子元素宽度占满容器宽度。
评论已关闭