宽高自动适应

我的哥哥呦

于 2019-07-31 10:47:42 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： H5C3 文章标签：自动适应宽高

本文链接：https://blog.youkuaiyun.com/qq_20497071/article/details/97627867

H5C3 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种使用Flex布局实现响应式网页设计的方法，通过CSS的flex属性，可以轻松创建具有自适应高度和宽度的网页布局。示例代码展示了如何设置主轴和侧轴，以及如何让元素在容器中按比例分配空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .layout{
            width: 500px;
            height: 600px;
            background-color: #CCCCCC;
            margin:10px auto;
            /*设置父容器为伸缩盒子*/
            display: flex;
            /*默认的主轴是row,这里需要以列的方式进行排列*/
            flex-direction: column;
        }
        header{
            width: 100%;
            height: 60px;
            background-color: red;
        }
        main{
            width: 100%;
            background-color: green;
            /*让当前伸缩项占据父容器的剩余空间*/
            flex: 1;
            /*让main成为伸缩盒子*/
            display: flex;
        }
        main > article{
            height: 100%;
            flex: 1;
            background-color: pink;
        }
        main > aside{
            height: 100%;
            flex: 3;
            background-color: darkblue;
        }
        footer{
            width: 100%;
            height: 80px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div class="layout">
    <header></header>
    <main>
        <article></article>
        <aside></aside>
    </main>
    <footer></footer>
</div>
</body>
</html>