两个自动宽度的 flexbox 列，只有一个可以换行

Question

我有两个内联显示的自动宽度弹性框列。我希望列中有动态内容，因此我试图找出一种方法来仅包装包含菜单项的第一列。

我知道我可以使用“d-flex”div 上的“flex-wrap”类来包装它们，但我只想包装第一个自动宽度列，同时保持两列彼此内联。

我正在使用 Bootstrap 4 CSS，它已经包含我正在使用的 flexbox 类，请参阅我提供的小提琴示例。

我想要的结果是这样的图片示例：

https://jsfiddle.net/j9v70qvy/

<div id="header-middle">
<div class="container">
    <div class="row align-items-center">
        <div class="header-middle-mobile-menu-outer col col-auto hidden-md-up">
            <a class="header-middle-mobile-menu-toggle">
                <i class="fa fa-bars"></i>
            </a>
        </div>
        <div class="logo-outer col col-auto">
            <div class="logo-image">
                <a href="#">
                    <img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiamcGxuM3VAhUTwWMKHVWaBgMQjRwIBw&url=http%3A%2F%2Fwww.freepik.com%2Ffree-vector%2Flogo-sample-text_701628.htm&psig=AFQjCNEHXsgvhjDI__g4Vk4GETXnCeRu6A&ust=1502481095339508">
                </a>
            </div>
        </div>
        <div class="d-flex col pl-0 pr-0 align-items-center justify-content-end justify-content-md-start">
            <div class="flex-wrap header-middle-menu-outer col col-auto hidden-sm-down">
                <nav class="header-middle-menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Sample Page</a></li>
                        <li><a href="#">Terms and Conditions</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </nav>
            </div>
            <div class="header-middle-social-media-icons-outer col col-auto">
                <nav class="header-middle-social-media-icons text-center icons-circle icons-sm">
                    <ul class="social-media-icons">
                        <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

Answer 1

好的，我想我终于弄清楚了这笔交易是什么。在这种情况下，您拥有的某些类的 Bootstrap 默认值与您想要的不同。

您需要在.header-middle-menu-outer 上覆盖.col-auto 的默认样式。在简写flex 属性中0 的flex-shrink 值正在杀死你。由于不允许列缩小，因此您会将内容从屏幕一侧推开，并且不会发生换行。

.header-middle-menu-outer 默认的 flex 样式就足够了，所以你可以在你的 CSS 中使用它：

.header-middle-menu-outer.col {
  flex: initial;
}

这会将事情设置回默认值flex: 0 1 auto，这意味着左列将被允许缩小，而右列将继续不缩小。所以左列会换行，而右列不会。

我会说你可以简单地去掉 col-auto 类（无论如何你都可以这样做），但是你会退回到 .col 的样式，它也包括同样有问题的样式：flex: 0 0 auto .因此，除非您也想删除该类，否则您可能不得不在 CSS 中使用覆盖样式。

Updated fiddle.

---

作为旁注，我建议您重新访问每个元素中包含的类。如果您在浏览器控制台中检查内容，您会发现这些类应用了许多相互竞争的样式，这对您没有任何帮助。例如，.d-flex 包含 justify-content-end 和 justify-content-md-start，它们的作用正好相反。但在这种情况下，我相信你不需要。在我上面链接的小提琴中，如果你删除这两个类，布局根本不会改变。

此外，col-auto 和 col 类非常相似。在上述.header-middle-menu-outer 的情况下，即使删除col-auto 并不能解决您的问题，您仍然可以这样做，因为我不确定该类此时是否真的添加了任何内容。

我怀疑您可以删除许多类，然后如果您想要包含的那些已删除类中有一个特定的样式规则，只需将其一次性放入样式表中。