justify-content
Coddy CSS Flexbox:完整课程 课程的第 7 课,共 15 课。
justify-content 属性用于定义沿主轴方向的对齐方式。
在 row 方向上,主轴是水平方向;在 column 方向上,主轴是垂直方向。
它接受 6 个值:
flex-start- 将项目对齐到容器的起始位置。flex-end- 将项目对齐到容器的末尾位置。center- 将项目对齐到容器的中心。space-between- 项目沿主轴均匀分布。第一个项目位于起始位置,最后一个项目位于末尾位置。space-around- 项目沿主轴均匀分布,每个项目周围的间距相等。space-evenly- 项目均匀分布,使任意两个项目之间的间距以及项目与边缘之间的间距都相等。
弹性容器的默认值是 flex-start。
示例:
.container {
display: flex;
justify-content: flex-end;
}挑战
简单将给定 flexbox 的主轴对齐方式设置为 space-between。
你应该试试所有值!
亲手试试
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>CSS Flexbox:完整课程中的所有课
自己练习: Web 在线编辑器