css 如何在不同的方向上对齐Flexbox项目？

hmae6n7t 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(140)

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

我想看到的是：

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

css

来源：https://stackoverflow.com/questions/74489742/how-to-align-flexbox-items-in-different-directions

2条答案

按热度按时间

ny6fqffe1#

我认为这里的问题是你不能同时在不同的方向对齐不同的盒子。我认为可以帮助的是在一个单独的FlexBox中移动<section>块，并在那里以不同的方式对齐它们。
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>

赞(0）回复(0）举报 2022-11-19

qco9c6ql2#

要实现预期的布局，您需要将width: 100%添加到应包含文本的div中。并定义各部分的宽度：
第一个

赞(0）回复(0）举报 2022-11-19