在flex布局中，以下哪个CSS可以实现flex项目两端对齐？（2 分） A．justify-content:space-around B．text-align:center C．align-items:center D．justify-content:space-between

D．justify-content:space-between 可以实现 flex 项目两端对齐。justify-content 属性用于控制 flex 项目在主轴上的对齐方式，包括以下几个取值：

- flex-start：默认值，项目在主轴起点对齐
- flex-end：项目在主轴终点对齐
- center：项目在主轴居中对齐
- space-between：项目在主轴两端对齐，项目之间的间隔相等
- space-around：项目在主轴两端对齐，项目之间的间隔相等，同时项目与容器之间的间隔也相等

因此，如果需要实现 flex 项目两端对齐，应该使用 justify-content:space-between。例如，以下代码实现了两端对齐的 flex 布局：

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

上述代码中，container 类是 flex 容器，通过设置 justify-content:space-between，实现了 flex 项目两端对齐的效果。

相关问题

.button { transition: background-color 0.3s ease-in-out; } .button:hover { background-color: #ff9900; } .container { width: 800px; margin: 0 auto; } .input { margin-bottom: 10px; } .result { display: flex; justify-content: space-around; } .success, .failure { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; } .success { background-color: lightgreen; } .failure { background-color: orange; }

这是CSS样式表中的一些样式定义，用于设置HTML元素的外观和布局等。

在上面的代码中，我们定义了一些类名，用于设置不同的样式：

1. .button：设置按钮的过渡效果，当鼠标悬浮在按钮上时，背景颜色会以0.3秒的时间从当前颜色渐变到#ff9900。

2. .button:hover：设置按钮在鼠标悬浮时的背景颜色为#ff9900。

3. .container：设置容器的宽度为800像素，并将其水平居中。

4. .input：设置表单输入框的下边距为10像素。

5. .result：将结果容器内的内容水平居中对齐。

6. .success和.failure：设置成功和失败的样式，宽高均为200像素，内容采用flex布局，居中对齐，字体大小为24像素，字体加粗。

7. .success：设置成功容器的背景颜色为lightgreen。

8. .failure：设置失败容器的背景颜色为orange。

通过定义这些样式，我们可以让HTML元素拥有更加美观、合理的外观和布局，从而提高用户体验。

justify-content: space-around;

`justify-content: space-around;`是CSS中的一个属性，用于设置弹性盒子元素在主轴上的对齐方式，使得元素在主轴上均匀分布，且元素与元素之间的间隔相等。具体来说，`space-around`会在每个元素周围创建相等的空间，使得元素之间的间隔相等，同时第一个元素和最后一个元素与容器边缘之间的间隔是其他元素之间间隔的一半。

以下是一个例子，其中有5个子元素，它们的`justify-content`属性被设置为`space-around`：

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

.item {
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

效果如下图所示：