CSS justify-content属性

CSS justify-content属性

CSS的justify-content属性控制一组元素沿着其包含框沿主轴线的对齐方式。justify-content属性定义了项目在水平方向如何排布。

语法

container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
}
  • flex-start:左对齐,项目对齐容器左侧。
  • flex-end:右对齐,项目对齐容器右侧。
  • center:居中对齐,项目居中对齐。
  • space-between:两端对齐,项目首尾两端对齐,且项目之间的间隙相等。
  • space-around:每个项目周围都有间隔,所以项目的间距都是平等的。
  • space-evenly:每个项目周围和之间都有间隔,这样组中的项目之间的间距恰好相等。
  • stretch:项目之间没有空白间隔,项目沿轴线拉伸以填充剩余空间。

示例

以下示例将演示每个值的不同效果。 假设我们有一个包含以下div元素的容器:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

样式:

.container {
  display: flex;
  justify-content: space-evenly;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 100px;
}

在这个例子中,容器有space-evenly的对齐方式,当我们改变对齐方式,我们的条目会相应的移动。

以下是一些使用样式的示例:

Flex-start

将项目对齐容器左侧。

.container {
  display: flex;
  justify-content: flex-start;
}

Flex-end

将项目对齐容器右侧。

.container {
  display: flex;
  justify-content: flex-end;
}

Center

将项目居中对齐。

.container {
  display: flex;
  justify-content: center;
}

Space-between

使项目首尾两端对齐,项目之间的间隙相等。

.container {
  display: flex;
  justify-content: space-between;
}

Space-around

为每个项目周围添加间隔,这样项目的间距都是平等的。

.container {
  display: flex;
  justify-content: space-around;
}

Space-evenly

每个项目周围和之间都有间隔,这样组中的项目之间的间距恰好相等。

.container {
  display: flex;
  justify-content: space-evenly;
}

Stretch

在剩余空间中,项目沿轴线拉伸以填充其剩余空间。

.container {
  display: flex;
  justify-content: stretch;
}

结论

CSS的justify-content属性是非常有用的,可以在组元素排列时做到对齐方式的自由控制,提升站点的可读性和美观效果,同时增加页面的自适应性。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程