第 5 讲：css 布局 - 浮动、flexbox 和网格
在本次讲座中，我们将深入探讨在 css 中创建布局的基本技术。了解如何使用浮动、flexbox 和网格构建内容将使您能够构建响应灵敏且组织良好的网站。在本讲座结束时，您将能够创建适应不同屏幕尺寸和设备的布局。
了解 css 布局技术
css 提供了多种布局技术，每种技术都有自己的用例。我们将介绍三种基本方法：floats、flexbox 和 grid。
1.漂浮
浮动最初设计用于将文本环绕图像，但它们已广泛用于创建布局。尽管它们大部分已被更新的技术取代，但它们在某些情况下仍然有用。
- 示例：
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
- html：
left contentright content
在此示例中，两个 div 左右浮动，创建两列布局。
立即学习“前端免费学习笔记（深入）”；
2.弹性盒
flexbox 是一种更现代的布局技术，提供强大的对齐和分布功能。它非常适合创建灵活且响应式的布局。
- 示例：
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex-item {
flex: 1;
margin: 10px;
}
- html：
item 1item 2item 3
这里，.flex-container 使用 flexbox 在容器中均匀分布三个项目，它们之间的间距相等。
3. css 网格
网格是 css 中最强大的布局系统，允许您创建复杂的二维布局，并精确控制行和列。
南方数据企业网站管理系统 V11.0全屏版新增功能:1.首页模板布局做了全新的调整;2.新增了企业网站广告管理系统,可以在后台随意增加和修改Banner广告、对联广告、浮动广告、弹出广告;3.新增了QQ在线资讯功能，同时还有N种模板选择;4.更换了网站统计管理系统；5.对菜单进行了加粗处理,显得更美观;6.后台使用了全新的静态编辑器,提高了后台打开编辑器的速度;7.新增了一个模板;8.修改了中英文
- 示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #ccc;
}
- html：
item 1item 2item 3
此示例创建一个包含两列的网格布局。第一列占据一小部分空间，第二列占据两部分空间，项目之间的间隙为 10px。
实际示例：
让我们使用 flexbox 创建一个简单的网页布局来排列页眉、主要内容和页脚。
html：
header main content
css：
body {
margin: 0;
font-family: Arial, sans-serif;
}
.flex-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header, .footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.main {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
在此示例中：
- 页眉和页脚被赋予固定的高度和背景颜色，而主要内容会扩展以填充剩余空间。
- flexbox 用于垂直对齐和分布内容。
练习运动
- 使用浮动创建一个简单的网页来创建两列布局。
- 使用 flexbox 设计响应式导航栏。
- 尝试使用 css 网格创建具有不同行和列大小的多列布局。
下一步：在下一堂课中，我们将探索带有媒体查询的响应式网页设计，您将在其中学习如何使您的布局适应不同的屏幕尺寸和设备。请继续关注！
在 linkedin 上关注我
里多伊·哈桑
