CSS中两端固定中间自适应是指将两侧元素固定,中间元素自适应宽度。这种布局常用于网页的导航栏、页眉、页脚等位置。.container { display: flex; justify-content:
CSS中两端固定中间自适应是指将两侧元素固定,中间元素自适应宽度。这种布局常用于网页的导航栏、页眉、页脚等位置。
.container { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #f2f2f2; } .left { flex: 0 1 20%; } .right { flex: 0 1 30%; } .middle { flex: 1; } @media screen and (max-width: 768px) { .container { flex-wrap: wrap; text-align: center; } .left, .right, .middle { flex-basis: 100%; margin-bottom: 10px; } }
上述代码使用了flex布局,通过设置各元素的弹性增益(flex-grow)、弹性收缩(flex-shrink)以及初始大小(flex-basis)来实现两端固定中间自适应。具体实现如下:
通过以上CSS代码的设置,实现了两端固定中间自适应的布局。使用这种布局,可以很好地适应不同屏幕尺寸的设备,提高网页的可用性和用户体验。
粉丝
0
关注
0
收藏
0