Flexbox证明内容：不适用

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。