3.1 Flexbox
使用Flexbox和Grid来创建灵活布局是现代响应式网站开发的关键技术。这些技术让你可以轻松管理页面上的元素布局，确保它们能够适应各种屏幕大小和设备。
Flexbox（Flexible Box Layout Module）是用来为元素进行一维布局的工具（在行或者列上）。Flexbox简化了创建灵活和响应式布局的过程。
Flexbox的基本概念：
- Flex容器：应用了
display: flex属性的元素 - Flex元素：Flex容器内的子元素
Flexbox的属性
Flex容器：
display: flex: 将元素定义为flex容器flex-direction: 设置flex元素的排列方向（row,column,row-reverse,column-reverse）justify-content: 控制flex元素在主轴上的对齐（flex-start,flex-end,center,space-between,space-around）align-items: 控制flex元素在交叉轴上的对齐（stretch,flex-start,flex-end,center,baseline）
Flex元素：
flex-grow: 定义元素在可用空间中的增长能力flex-shrink: 定义元素在空间不足时的收缩能力flex-basis: 设置元素在分配额外空间前的初始大小align-self: 覆盖align-items对元素在交叉轴上的对齐设置
Flexbox的使用示例
让我们创建一个包含三列的布局，这个布局可以适应不同的屏幕尺寸：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox示例</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">列 1</div>
<div class="flex-item">列 2</div>
<div class="flex-item">列 3</div>
</div>
</body>
</html>
代码解释：
-
.flex-container: 定义一个flex容器，元素之间有等间隔，并允许在空间不足时换行 -
.flex-item: flex元素，占据相等空间，最小宽度200px，均匀分布在容器内
3.2 CSS Grid
CSS Grid Layout 是一个二维布局系统，允许你使用行和列来创建复杂的布局。
CSS Grid的基本概念：
- Grid容器: 应用了
display: grid属性的元素 - Grid元素: grid容器内的子元素，位于网格中
CSS Grid的属性
Grid容器：
display: grid: 将元素定义为grid容器grid-template-columns: 设置网格中列的数量和大小grid-template-rows: 设置网格中行的数量和大小gap: 控制行和列之间的间距justify-items: 控制grid元素的水平对齐align-items: 控制grid元素的垂直对齐
grid-column: 定义元素跨越多少列grid-row: 定义元素跨越多少行justify-self: 覆盖元素的水平对齐align-self: 覆盖元素的垂直对齐
Grid元素：
CSS Grid的使用示例
让我们创建一个包含三列两行的布局，这个布局可以适应不同的屏幕尺寸。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid示例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
<div class="grid-item">元素 4</div>
<div class="grid-item">元素 5</div>
<div class="grid-item">元素 6</div>
</div>
</body>
</html>
代码解释：
.grid-container: 定义一个grid容器，包含三个列和两行，每个元素占据相等的空间.grid-item: grid元素，具有均匀的内边距和背景
GO TO FULL VERSION