align-content：flex-end不将元素移动到容器底部 [英] align-content: flex-end not shifting elements to container bottom

问题描述

我有 outerWrapper ， innerWrapper 和儿童。

outerWrapper 的高度为 300px ，且为 display：flex 。

outerWrapper has a height of 300px, and is display: flex.

innerWrapper 也是 display：flex 。

我认为因为它们 flex ， innerWrapper inherits outerWrappers height。

I think because they are flex, innerWrapper inherits outerWrappers height.

我想将 align-content：flex-end 添加到 outerWrapper 。但它不工作，因为 innerWrapper 继承 outerWrappers height。

I want to add align-content: flex-end to outerWrapper. But it doesn't work, because innerWrapper inherits outerWrappers height.

如何将 align-content：flex-end 添加到 outerWrapper ？

或者，我如何保持 innerContents height与其子级相同的高度，因此 align-content：

Or, how can I keep innerContents height the same height as its children, so align-content: flex-end will work?

这里是描述我想要的图片：

Here's an image describing what I want:

我想把 innerContent 下拉到红线。

更新

我只想澄清。我要 innerWrapper 结束于红线，而不是开始。

I just want to clarify. I want innerWrapper to end at the red line, not start.

JSFiddle

JSFiddle

#outerWrapper {
  height: 300px;
  background-color: lightgreen;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

<div id="outerWrapper">
  <ul id="innerWrapper">
    <li class="child">I'm #01</li>
    <li class="child">I'm #02</li>
    <li class="child">I'm #03</li>
    <li class="child">I'm #04</li>
    <li class="child">I'm #05</li>
  </ul>
</div>

推荐答案

请尝试 align-items：flex-end; 而不是 align-content：flex-end; 。

align-content用于多行灵活框。当项目在单行中时，它不起作用。

align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value.

flex-box的align-items属性在垂直方向上对齐flex容器中的项，就像justify-content对于水平轴。

The align-items property of flex-box aligns the items inside a flex container vertically just like justify-content does for horizontal axis.

这篇关于align-content：flex-end不将元素移动到容器底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！