Question

我有一个行方向flexbox嵌套在列方向的flexbox中，但是当我想在孩子中使用align-content时，它不起作用。

当我用display:flex替换父级的display:block时，它可以正常工作。

在下面的代码中，我们可以看到.row align-content: flex-end;无法正常工作。但是，如果我将.column display: flex;替换为display: block;，则align-content: flex-end;可以正常工作。

可以解决这个问题吗？

＆＃13;

body {
    background-color: grey;
}

.column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    background-color: green;
}

.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: flex-end;
    align-items: center;
    background-color: red;
}

.row-test {
    min-height: 200px;
}

span {
    width: 30%;
    background-color: orange;
}

＆＃13;

<body class="column">
    <section class="row row-test">
        <span>Test Test Test Test Test Test Test Test Test</span>
        <span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span>
    </section>
</body>

＆＃13;

Answer 1

当主要Flex容器切换到align-content时，display: block“工作的事实只是一个浏览器错误。

根据需要将弹性项目移至底部，但仅在Firefox中。

在Chrome中它没有做任何事情，这是正确的行为（根据规范）。

在IE11中，它将项目移到顶部（也是不一致的）。

这些是不应依赖于指导的错误和不一致，因为它们无助于解释align-content属性的工作原理。

在 单行灵活容器 中，与问题中的那个一样，align-content无效。要使用的属性为align-items。

在 多行灵活容器 中，要使用的属性为align-content。

此外，align-self属性与align-items密切相关。一个旨在覆盖另一个。它们都起作用。

来自规范：

8.3. Cross-axis Alignment: the align-items and align-self properties

align-items设置所有Flex容器项的默认对齐方式，包括匿名弹性项。 align-self允许为各个弹性项重写此默认对齐方式。

8.4. Packing Flex Lines: the align-content property

align-content属性对齐Flex容器中的行   当横轴有额外的空间时，弯曲容器，类似于   justify-content如何对齐主轴内的各个项目。   注意，此属性对单行Flex容器没有影响。

就这个问题而言，忘掉align-content。它是无用的（除非你的弹性项目包装）。

只需使用align-items: flex-end（或align-self: flex-end上的span）：

body {
  background-color: grey;
}
.column {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  background-color: green;
}
.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: flex-end;        /* will work when items have wrapped */
  align-items: flex-end;          /* adjusted; works when items in one line */
  background-color: red;
}
.row-test {
  min-height: 200px;
}
span {
  width: 30%;
  background-color: orange;
  /* align-self: flex-end;     this would also work on single line container */
}

<body class="column">
  <section class="row row-test">
    <span>Test Test Test Test Test Test Test Test Test</span>
    <span>Test Test Test Test Test Test Test Test Test Test Test 
          Test Test Test Test Test Test Test Test Test Test Test</span>
  </section>
</body>

Answer 2

你需要添加flex-wrap：wrap;工作对齐内容

Answer 3

也许您想使用justify-content而不是align-content

Answer 4

有时，您需要在弹性容器的父容器上设置高度，以使align-content起作用。

Answer 5

回答这个问题的时间可能较晚，但是在Billy Mitchell上进行了详细说明，您可以将父容器设置为特定的高度，或者如果要使其完全居中，则可以

.parent {
  display: flex;
  flex-flow: row wrap;
  height: -webkit-fill-available;
  align-content: center;
  justify-content: space-evenly;
}

<div class="parent">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

您可以根据需要构造和替换以上代码片段的属性值。这是complete guide to flexbox，对我有很大帮助。

align-content不适用于flex项目

5 个答案: