携程网案例>>flex伸缩布局

最新推荐文章于 2023-05-23 10:02:13 发布

Ron韦斯莱

最新推荐文章于 2023-05-23 10:02:13 发布

阅读量500

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/89403083

版权

本文通过携程网案例展示了如何利用Flex布局实现网页的屏幕自适应效果，确保内容在不同设备上都能良好展示。文章通过具体代码解释了Flex布局的关键属性和技巧。

摘要由CSDN通过智能技术生成

效果展示：
在这里插入图片描述

目的：可以达到屏幕自适应的效果。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*顶部块样式*/
        header{
            width: 100%;
            /*设置为伸缩盒子*/
            display: flex;
        }
        header > a{
            /*width: 100%;*/
            /*flex:设置当前子元素占据父容器剩余宽度的比例*/
            flex: 1;
        }
        header > a > img{
            width: 100%;
        }
        /*主体内容块样式*/
        main{
            width: 100%;
            padding:0 10px;
            /*设置盒模型*/