如何对齐 CSS flexbox 中的列？ [关闭]

Posted 2023-03-06

【中文标题】如何对齐 CSS flexbox 中的列？ [关闭]

【英文标题】：How do I align the columns in CSS flexbox? [closed]

【发布时间】：2017-05-19 10:54:03

【问题描述】：

我的天气应用的布局有两个问题

底部和右侧边缘周围的空白区域 我不知道如何将工作日与其下方的 5 个红色框列对齐，这样它们就在我这边

我正在采用移动优先的方法，因此您需要使用手机屏幕尺寸在开发控制台中查看它，因为我尚未添加媒体查询。

https://lettda.github.io/WeatherWiz/

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误和在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

@PraveenKumar 1) 这不能回答我的问题，也无济于事 2) 我明确表示我希望它们并排 3) 为了了解我在看什么视觉是不需要我的 html 和整个样式表

需要minimal reproducible example 的原因是我们想提供帮助。如果我们不必重新创建复制问题所需的任何代码，那么提供帮助会要容易得多。这是您已经拥有的代码。因此，请帮助我们帮助您并提供一个完整的 minimal reproducible example 来复制此类问题的问题。如果没有minimal reproducible example，甚至开始帮助您所需的努力量要高得多，这显着减少了愿意/能够帮助您的人数。即使我们付出了额外的努力，我们也必须猜测您可能遇到的问题的很大一部分。

@mayken 把我得到的最有帮助的答案传下来！感谢您提出观点并解释为什么有必要。我意识到这是我已经编写并主演了一段时间的代码，我会自动理解这些片段适合的位置，但你们都没有

【参考方案1】：

打开.footer 设置bottom: -1px;（它会粘在底部） 将.col-xs-6 类添加到#weekDay（它将使用半个 12 列网格） 将另一个.col-xs-6 添加到#weekly_forecast（它将使用 12 列网格的另一半） 将line-height: 140px; 添加到h2 使其与红色divs 垂直对齐。 对于更大的width 视口，使用col-md-*s 复制相同的公式