CSS Flexbox 布局中的 justify-content 和 align-items 详解
在日常前端开发中，我们经常使用 Flexbox 布局来实现页面的排版。在使用 Flexbox 进行布局时，我们需要掌握两个重要的 CSS 属性：justify-content 和 align-items。本文将详细介绍这两个属性的作用以及如何正确使用它们。
- justify-content 属性
在使用 Flexbox 进行水平布局时，我们需要使用 justify-content 属性来控制子元素沿着主轴的对齐方式。它有以下几个取值：
- flex-start：子元素靠左对齐；
- flex-end：子元素靠右对齐；
- center：子元素在容器内居中对齐；
- space-between：子元素平均分配空间，首尾元素贴边；
- space-around：子元素平均分配空间，元素之间空间相等。
以下是一个使用 justify-content 的例子：
// javascriptcn.com 代码示例
<style>
.container {
display: flex;
justify-content: center;
height: 200px;
background-color: #f2f2f2;
}
.item {
width: 100px;
height: 100px;
background-color: #acacac;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>上面的代码将三个子元素在容器内居中对齐，效果如下：
- align-items 属性
在使用 Flexbox 进行垂直布局时，我们需要使用 align-items 属性来控制子元素沿着交叉轴的对齐方式。它有以下几个取值：
- flex-start：子元素靠上对齐；
- flex-end：子元素靠下对齐；
- center：子元素在容器内居中对齐；
- baseline：子元素按照基线对齐；
- stretch：子元素拉伸填满整个容器。
以下是一个使用 align-items 的例子：
// javascriptcn.com 代码示例
<style>
.container {
display: flex;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
.item {
width: 100px;
height: 100px;
background-color: #acacac;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>上面的代码将三个子元素垂直居中对齐，效果如下：
- 总结
掌握 justify-content 和 align-items 可以让我们更好地理解 Flexbox 布局，使用它们可以轻松实现各种复杂的布局效果。在实际开发中，我们需要灵活运用这两个属性，根据具体需求选择合适的取值。
完整代码如下：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox 布局中的 justify-content 和 align-items 详解</title>
<style>
/* 水平居中 */
.container1 {
display: flex;
justify-content: center;
height: 200px;
background-color: #f2f2f2;
}
.item {
width: 100px;
height: 100px;
background-color: #acacac;
}
/* 垂直居中 */
.container2 {
display: flex;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>水平居中</h2>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>垂直居中</h2>
<div class="container2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f3f9b7d4982a6eb8c739a