使用display实现页面根据浏览器窗口大小自适应

使用Flex布局实现响应式页面

最新推荐文章于 2024-11-20 16:44:58 发布

原创最新推荐文章于 2024-11-20 16:44:58 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

本文展示了如何利用CSS的display:flex属性创建一个响应式的页面布局。通过设置.container的flex-direction为row，实现了左右两部分的内容水平排列。左边区域.left占70%宽度，背景色为红色；右边区域.right占30%宽度，背景色为粉色。这种布局方式能自动适应浏览器窗口大小的变化，调整内容的宽度。

思路:使用display:flex实现页面效果

<div class="container">
    
<div class="left"></div>
<div class="right"></div>
</div>

<style>
.container {
height:100vh;
display:flex;
flex-direction:row;
}

.left {
width:70%;
background-color:red;
}

.right{
width:30%;
background-color:pink;
}
</style>

代码之中使用 flex-direction:row实现了左右两个盒子得水平排列，然后width占据百分比进行分割，这样页面就会根据浏览器窗口大小的变化实时的调整自身大小宽度