首页使用flex布局设计一个网页

使用flex布局设计一个网页

时间: 2023-12-14 14:50:27 浏览: 64

Flex页面布局

Flex开发中最基础的也是初学比较模糊的就是页面的布局，而这几张图片就能精妙透彻的解释Flex中页面布局的精华！

好的，以下是一个使用flex布局的基本网页结构： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Flex布局网页</title> <style> body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } header { background-color: #333; color: #fff; padding: 20px; } nav { display: flex; background-color: #999; height: 40px; align-items: center; padding: 0 20px; } nav a { color: #fff; padding: 0 20px; text-decoration: none; font-size: 18px; font-weight: bold; } main { display: flex; flex: 1; padding: 20px; } aside { background-color: #ccc; width: 200px; padding: 20px; } article { flex: 1; background-color: #fff; padding: 20px; } footer { background-color: #333; color: #fff; padding: 20px; } </style> </head> <body> <header> <h1>Flex布局网页</h1> </header> <nav> <a href="#">首页</a> <a href="#">产品</a> <a href="#">服务</a> <a href="#">关于我们</a> </nav> <main> <aside> <h2>侧边栏</h2> <p>这是侧边栏的内容</p> </aside> <article> <h2>主要内容</h2> <p>这是主要内容的部分</p> </article> </main> <footer> <p>版权所有 © 2021 Flex布局网页</p> </footer> </body> </html> ``` 在这个例子中，我们使用了`display: flex`来将页面元素放入一个弹性容器中，并使用`flex-direction: column`来设置主轴方向为垂直方向。我们还使用了`align-items: center`来将导航栏的文本垂直居中，`flex: 1`来将主要内容部分填充整个可用空间，以及`min-height: 100vh`来使容器的高度至少占满整个视口。这个例子只是一个基本的示例，你可以根据自己的需求进行更改和扩展。

阅读全文