将弯曲的包裹元件与容器底部对齐？

Question

我有以下html：

<div class="inhaler__animation__container">
    <div class="inhaler__image__wrapper">
        <img src="img/inhaler-only.png" alt="Inhaler animation image" title="Inhaler animation image">
        <div class="inhaler__image__dot__wrapper">
            <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
            <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
            <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
            <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
            <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
            <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
            <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
            <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
            <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
            <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
            <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
            <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
        </div>
    </div>
</div>

以及以下CSS：

.inhaler__animation__container > .inhaler__image__wrapper > .inhaler__image__dot__wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-start;
}

但是作为.inhaler__image__dot__wrapper子元素的点图像仍然垂直散开，我希望它们彼此堆叠，但这不是这里发生的事情，如何防止点图像不能垂直展开吗？

请参见下图：：-

那么，如何防止点图像垂直散开？即它们应该与灰色区域的底部对齐。

可以在HERE中找到DEMO。

Answer 1

您似乎正在寻找align-content属性。

来自MDN：

  

CSS align-content属性定义浏览器的分布方式   内容项沿它们的横轴之间和周围的空间   容器，它是一个flexbox容器。

只需将align-content: flex-end;添加到弹性容器中

.inhaler__animation__container > .inhaler__image__wrapper > .inhaler__image__dot__wrapper {
    ...
    align-content: flex-end;
}