使用flex对网页进行布局（导航，侧边，主体）

最新推荐文章于 2024-07-21 21:06:06 发布

最爱吃苹果

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量512

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_45695485/article/details/124686251

版权

本文介绍了如何利用Flexbox布局在HTML和CSS中创建具有导航栏、侧边栏和主体内容的网页结构。通过实例演示，详细解释了Flex属性的使用，包括flex-direction、justify-content和align-items等，帮助开发者实现响应式和灵活的页面布局。

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

实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            height:100vh;
            background-color: #eee;
        }
        /* 使边框为1px黑 */
        *{
            border: 1px solid black;
        }
        .flex{
            display: flex;
        }
        .flex1{
            flex: 1;
        }
        .column{
            flex-direction: column;
        }
        .backwhite{
            background-color: white;
        }
    </style>
</head&g