html - Flexbox 对齐内容 : Right not applying

Question

我正在尝试使用 flexbox 对齐我的页脚，但出于某种原因，它不会将它一直推到右边。

当使用 justify-content: center 时，它会将元素居中，但是当我尝试使用 justify-content: right 时，它会将所有列表元素推回到左边。我尝试将框的宽度设置为 100%，但这也不起作用。

这是我正在使用的一些代码。

.site-footer {
  position: relative;
  a {
    color: blue;
    text-decoration: none;
  }
}

.social-footer-nav{
  ul{
    display: flex;
    list-style-type: none;
  }
}

.footer-nav{
  ul{
    display: flex;
    list-style-type: none;
  }
}

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <nav class="social-footer-nav">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'social',
                'menu_id'        => 'social-menu',
            ) );
            ?>
        </nav>
    </div>
<footer

Answer 1

显然只是一个被忽视的选项。有一个justify-content: right 但它不会将 flexbox 中的内容推到右边。要实现右侧的内容，必须使用justify-content: flex-end。