首页 文章

Flexbox父对齐项覆盖子对齐内容

提问于
浏览 次
1

在下面的代码中，如果我在flex-column中注释掉 align-items 行，则背景为灰色，图标之间存在空格 . 如果我取消注释 align-items ，背景为蓝色，图标居中 .

我认为 align-items 和 justify-content 彼此正交 - 为什么 align-items 会影响子弹性箱容器中的弹性箱间距问题？宽度是否从100％开始？

我认为它只会管理它的直接孩子 . 此外，当 align-items 处于活动状态时，整个区域都是蓝色的，我不应该至少看到图标的背景为灰色吗？

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: blue;
}

.flex-row {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: gray;
}

<div class="flex-column">
      <div>Some Content0</div>
      <div>Some Content1</div>
      <div class="flex-row" style='border: solid;'>
        <img src="update.svg" style="max-width: 20px;">
        <img src="update.svg" style="max-width: 20px;">
      </div>
      <div>Some Content2</div>
      <div>Some Content3</div>
  </div>
html css css3 flexbox

2 回答

  • 1

    父Flex容器设置为列方向 . 这意味着主轴是垂直的，横轴是水平的 .

    align-items 属性仅适用于横轴 .

    因此，当您将容器设置为：

    align-items: center

    ......孩子（ .flex-row ）水平居中 .

    基本上，Flex项目两侧的所有可用空间都会被消耗，从而导致项目居中 .

    显示父级的背景颜色（蓝色），因为孩子的背景颜色（灰色）已被挤压到中心，并位于图像后面 .

    在父项上禁用 align-items: center 时，将在子项上恢复默认的 stretch 值 .

    与其父级不同，子级（ .flex-row ）是行方向容器 . 所以主轴是水平的，横轴是垂直的 .

    justify-content 属性仅适用于主轴 . 所以在这种情况下，它与父级的 align-items 方向相同 .

    使用子容器上的 justify-content: space-between 和父容器上的 align-items: stretch ，图像和子项的灰色背景颜色可以访问容器的整个长度 .

    宽度是否从100％开始？

    通常，是的 . 但无论如何，你已经用中心覆盖了全长 .

    也许你认为只有内容（图像）应该居中而不是灵活项目 . 这不完全是它的工作原理 . Flex容器中有三个独立的级别：

    • 容器

    • 项目

    • 内容

    这是一个更完整的解释（它关注Grid，但这些概念也适用于flex）：

    了解有关沿主轴的柔性对齐的更多信息：

    在此处了解有关沿交叉轴的柔性对齐的更多信息：

    回复于
  • 2

    在弹性柱容器上， align-items 影响横轴（水平），并使用其默认值 stretch ，使其弹性项目填充其宽度（100％宽） .

    当你将其更改为 center 时，它将是控制是否填充其父级's width, and since yours doesn' t的项目宽度，它们将按照你告诉他们（ align-items: center ）的方式很好地居中 .

    回复于

相关问题