Menu
CoddyTech

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;
}
challenge icon

挑战

简单

将给定 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 在线编辑器