如何在不同方向对齐 flexbox 项目？答案

【问题标题】：How to align flexbox items in different directions?如何在不同方向对齐 flexbox 项目？
【发布时间】：2022-11-18 21:08:07
【问题描述】：

我在父 div flexbox 中放置了 4 个 flexbox 项目。当我缩小屏幕宽度时，这就是我得到的。

我想看到的是：

我尝试添加一些具有不同对齐设置的 CSS 规则，但都没有帮助。

.footer__main__div {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

<div class="footer__main__div">
      <div class="footer__left__div">
      </div>

      <section class="footer__list__section">
      </section>

      <section class="footer__list__section">
      </section>

      <section class="footer__list__section">
      </section>
</div>

【问题讨论】：

尝试将 flex:1 添加到 .footer__left__div 以获得较小的屏幕（媒体查询），您还可以分享该问题的 codepen 链接吗？

标签： html css

【解决方案1】：

我认为这里的问题是你不能同时在不同的方向对齐不同的盒子。我认为可以帮助将 <section> 块移动到一个单独的 flexbox 中，并以不同的方式对齐它们。

HTML 代码如下所示：

   <div class="footer__main__div">
        <div class="footer__left__div">
        </div>

        <div class="footer__right__div">
            <section class="footer__list__section">
            </section>

            <section class="footer__list__section">
            </section>

            <section class="footer__list__section">
            </section>
        </div>
    </div>

【讨论】：