997
社区成员
发帖
与我相关
我的任务
分享前端CSS-justify-content 和 align-items 属性| “朝闻道”知识分享大赛
这是我参加朝闻道知识分享大赛的第40篇文章。
在 Flexbox 布局中，justify-content 和 align-items 是两个非常重要的属性，分别控制项目在主轴和交叉轴上的对齐方式。这两个属性为 Flexbox 布局提供了极高的灵活性，适合创建各种不同的布局效果。
1.justify-content 属性
justify-content 属性控制项目在主轴上的对齐方式，即元素在 水平或垂直方向上的排列，取决于 flex-direction 的设置（横向或纵向）。
语法
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
适用范围
-
主轴方向：水平或垂直，取决于
flex-direction的设置。 -
主要作用：控制子元素在主轴上的对齐方式和间距。
属性值及效果
-
flex-start（默认值）：项目从主轴的起点开始排列。 -
flex-end：项目从主轴的终点开始排列。 -
center：项目在主轴上居中对齐。 -
space-between：项目均匀分布在主轴上，首尾项目靠近容器边缘。 -
space-around：项目均匀分布，首尾项目与容器边缘保留半个间距。 -
space-evenly：项目均匀分布，每个项目之间以及项目和容器边缘之间的间距相等。
示例
以下是每个属性值的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justify-content 示例</title>
<style>
.container {
display: flex;
background-color: #f0f0f0;
padding: 10px;
height: 100px;
gap: 10px;
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
border-radius: 5px;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.space-evenly {
justify-content: space-evenly;
}
</style>
</head>
<body>
<h2>justify-content: flex-start</h2>
<div class="container flex-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>justify-content: flex-end</h2>
<div class="container flex-end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>justify-content: center</h2>
<div class="container center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>justify-content: space-between</h2>
<div class="container space-between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>justify-content: space-around</h2>
<div class="container space-around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>justify-content: space-evenly</h2>
<div class="container space-evenly">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
解释：
-
flex-start：项目从主轴的起点开始依次排列。 -
flex-end：项目从主轴的终点开始依次排列。 -
center：项目在主轴上居中排列。 -
space-between：项目间均匀分布，第一个和最后一个项目靠近容器边缘。 -
space-around：项目间均匀分布，第一个和最后一个项目与边缘保留半个间距。 -
space-evenly：项目间均匀分布，每个项目与相邻项目及容器边缘保持相同间距。
2.align-items 属性
align-items 属性控制项目在交叉轴上的对齐方式，即项目在 垂直方向上的排列（或水平排列，如果主轴为垂直）。
语法
align-items: flex-start | flex-end | center | baseline | stretch;
适用范围
-
交叉轴方向：垂直或水平，取决于
flex-direction的设置。 -
主要作用：控制子元素在交叉轴上的对齐方式。
属性值及效果
-
stretch（默认值）：项目拉伸以填满容器（适用于未设置高度的项目）。 -
flex-start：项目从交叉轴的起点对齐。 -
flex-end：项目从交叉轴的终点对齐。 -
center：项目在交叉轴上居中对齐。 -
baseline：项目的文本基线对齐。
示例
以下是每个属性值的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items 示例</title>
<style>
.container {
display: flex;
height: 200px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
border-radius: 5px;
}
.flex-start {
align-items: flex-start;
}
.flex-end {
align-items: flex-end;
}
.center {
align-items: center;
}
.baseline {
align-items: baseline;
}
.stretch {
align-items: stretch;
}
</style>
</head>
<body>
<h2>align-items: flex-start</h2>
<div class="container flex-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>align-items: flex-end</h2>
<div class="container flex-end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>align-items: center</h2>
<div class="container center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>align-items: baseline</h2>
<div class="container baseline">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>align-items: stretch</h2>
<div class="container stretch">
<div class="item" style="height: auto;">1</div>
<div class="item" style="height: auto;">2</div>
<div class="item" style="height: auto;">3</div>
</div>
</body>
</html>
解释：
-
flex-start：项目从交叉轴的起点对齐。 -
flex-end：项目从交叉轴的终点对齐。 -
center：项目在交叉轴上居中对齐。 -
baseline：项目基线对齐，适合用于包含文本的布局。 -
stretch：项目在交叉轴方向上拉伸填满容器，适用于未设置具体高度的
项目。
3.小结
-
justify-content控制项目在主轴上的对齐方式，主要用于设置水平方向或垂直方向的元素排列和间距。-
主要值包括：
flex-start、flex-end、center、space-between、space-around和space-evenly。
-
-
align-items控制项目在交叉轴上的对齐方式，主要用于设置垂直方向或水平方向的对齐。-
主要值包括：
stretch、flex-start、flex-end、center和baseline。
-
...全文
请发表友善的回复…
发表回复
