如何将 flexbox 导航栏向右对齐？答案

【问题标题】：How do I align flexbox navigation bar to the right?如何将 flexbox 导航栏向右对齐？
【发布时间】：2021-09-16 15:43:44
【问题描述】：

我遇到了一个我无法解决的问题，所以我有一个简短的问题。我只需要将徽标放在容器的左侧，并将导航链接（顶部栏）放在左侧。我的代码哪里出了问题？

HTML：

<header>
        <div class="container">

            <?php
            $custom_logo_id = get_theme_mod('custom_logo');
            $logo = wp_get_attachment_image_src($custom_logo_id, 'full');

            if (has_custom_logo()) {
                echo '<a href="http://website.test/" class="site-link pull-left"> <img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"> </a>';
            } else {
                echo '<h1 class="site-logo">' . get_bloginfo('name') . '</h1>';
            }
            ?>

            <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'top-menu',
                    'menu_class' => 'top-bar'
                )
            );
            ?>
        </div>

    </header>

CSS：

header .container {
    height: 20%;
    z-index: 99;
    display: flex;
    align-items: center;
}

header .container .site-logo {
    align-items: flex-start;
}

header .container .top-bar {
    list-style-type: none;
    display: flex;
    align-self: flex-end;
}

【问题讨论】：

logo { margin-right: auto; } 会将徽标留在左侧，并将其他所有内容推到右侧。 margin: auto 与 flex-grow 的工作方式相同，通过 cinsuming 所有剩余空间。
感谢您的回答，遗憾的是它不起作用，根本没有任何变化。
如果您发布 minimal reproducible example 而不是未解析的 php，将会很有帮助
您在标题中说“如何将 flexbox 导航栏向右对齐？”，然后在您的帖子开头说“我只需要一个徽标位于容器的左侧和左侧的导航链接（顶部栏）”你能澄清你想要什么吗？ ——
我为这个措辞不当的标题道歉，我需要左边的标志，导航链接不是标志...

标签： html css flexbox header navbar

【解决方案1】：

当有一个标志图像时，它被包裹在一个<a> 标记中。所以边距需要应用到<a>。当没有标志图片时，应将边距应用于<h1>。

试试：


.site-link, .site-logo {
  margin-right: auto;
}

【讨论】：

哦，天哪……这很有魅力。非常感谢！！！