问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

对齐内容不适用于弹性项目

社区维基
1
新手上路，请多包涵

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

当我用 display:flex 替换父母的 display:block 时，它起作用了。

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

可以解决这个问题吗？

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

 <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>

原文由 Jean-Louis De La Marre 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssflexbox
阅读 191
1 个回答
得票最新
社区维基
1

事实上 align-content 在主 flex 容器切换到 display: block 时“工作”只是一个浏览器错误。

它根据需要将 flex 项目移动到底部，但 仅限于 Firefox 。

在 Chrome 中它什么都不做，这是正确的行为（根据规范）。

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

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

在 单行 flex container 中，就像问题中的 align-content 没有效果。要使用的属性是 align-items 。

在 多行 flex 容器中，要使用的属性是 align-content 。

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

从规格：

8.3.横轴对齐： align-items 和 align-self 属性

align-items 设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目。 align-self 允许为单个弹性项目覆盖此默认对齐方式。

8.4.打包 Flex 行： align-content 属性

align-content 属性在横轴上有额外空间时在弹性容器内对齐弹性容器的行，类似于 justify-content 在主轴内对齐单个项目的方式。 请注意，此属性对单行弹性容器没有影响。

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

只需使用 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>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题