如何使用 flexbox 在 Css 3 中垂直对齐内容？ [关闭]答案

【问题标题】：How to vertically align content in Css 3 using flexbox? [closed]如何使用 flexbox 在 Css 3 中垂直对齐内容？ [关闭]
【发布时间】：2021-09-27 12:12:33
【问题描述】：

我已经通过许多不同的方式垂直对齐我的内容，但我想知道如何在 Css3 中使用 flexbox 垂直对齐我的内容

【问题讨论】：

请尝试学习 flexbox 的概念。 display: flex 和 justify-content: centre 将帮助您完成这项工作。你有没有试过同样的？如果您在添加这些之后仍然遇到问题，请发布您的相关代码，以便有人可以调试您的问题。
这能回答你的问题吗？ Vertically center items with flexbox

标签： css flexbox

【解决方案1】：

您可以通过将内容放在 div 中轻松地垂直对齐内容。并将 "display:flex" 属性赋予该 div。对于水平对齐，您可以在该 div 上使用 "justify-content" 属性。对于垂直对齐，您可以在该 div 上使用 "align-items" 属性。另外还有一个属性 align-content 可以对齐伸缩线。

请注意：

1. justify-content 和 align-items 属性仅在 display 为 flex 时有效。

2. 请记住，如果没有足够的高度，您将看不到垂直对齐方式的任何变化。所以，首先给 div 一些高度。宽度也是如此，如果您的 div 周围没有空白空间，您将不会感觉到水平对齐有任何变化。虽然，对齐已设置。但由于内容覆盖了 div 内的整个空间。所以，你不会感觉到任何对齐。

3.有flex-direction的情况。如果 flex-direction 更改为 column，那么您将看到 align-items 属性用于设置水平对齐方式。同样，在这种情况下， Justify-content 属性用于设置垂直对齐方式。

此外，还有 align-self 属性适用于子元素。如果您想为该 div 的任何子项提供一些不同的垂直对齐方式。您可以将 align-self 属性与该子元素一起使用。

【讨论】：

justify-content 和 align-items 的方向根据 flex-direction 变化
是的，我知道，但问题不在于 flex-direction 大小写。该人仅询问对齐方式。很明显，当你改变 flex-direction 时，它会影响 flexbox。但这不是这里的问题。请先阅读问题。
将内容与 flexbox 垂直对齐直接取决于 flex 的方向，因此说 align-items 垂直对齐它们并不完全正确。
好的。我编辑了我的答案。并提到了弯曲方向。感谢指导。