flex布局的小案例

最新推荐文章于 2023-03-21 11:09:27 发布

junlingshiwo

最新推荐文章于 2023-03-21 11:09:27 发布

阅读量533

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45722135/article/details/106364454

版权

本文介绍了如何利用Flex布局创建一个可伸缩的静态页面，该页面在拉伸时能保持内容不溢出。通过代码分三个部分进行样式设置，实现了预期的效果。

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

今天所说就是利用flex布局做一个小案例。

上边两张效果图，就是使用伸缩布局做成，只能是静态页面，它是可以随意拉伸，并且还不会让里面东西溢出来。

再看下所写的代码，分了三个部分，再给其三部分的样式，就成效果图的了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        a{text-decoration: none;color: black;}
        /*头部*/
        header{width: 100%;display: flex;}
        header>a{flex: 1;}
        header>a>img{width: 100%;}
        /*主要内容*/
        main{
            width: 100%;
            padding: 0 10px;
            /*background-color:red ;*/
            box-sizing: border-box;
        }
        main&