如何使用 alignSelf 集扩展到 maxWidth

Question

以下代码正确扩展了 div 的 max-width：

<div style="display: flex; flex-direction: column;">
    <div style="max-width: 500px;">
        <div style="background-color: red; height: 20px;"></div>
    </div>
</div>

结果：

但是，当我设置任何对齐方式时，align-items 在最父级 div 上，align-self 在 max-width div 等上， maxWidth将不再使用，实际宽度设置为0。
例如：

<div style="display: flex; flex-direction: column;">
    <div style="max-width: 500px; align-self: center">
        <div style="background-color: red; height: 20px;"></div>
    </div>
</div>

产生空白屏幕：

如何既对齐 div（例如居中）又保持其宽度不变？目标不是求助于使用 width，因为它不会调整到父宽度（可能是任何东西）。任何可以保持宽度的解决方案，但即使没有 space 也不会坚持采用它，就像 width 一样。

Answer 1

对于align-self:center和flex-direction:column，您需要设置内部容器宽度，我设置为100%，现在显示了。

<div style="display: flex; flex-direction: column;background-color:grey">
  <div style="max-width: 500px; align-self: center; width:100%;background:black;">
    <div style="background-color: red; height: 20px;"></div>
  </div>
</div>

如何使用 alignSelf 集扩展到 maxWidth

How to expand to maxWidth with alignSelf set

html

javascript

css

layout

alignment