Flexbox包装在容器外部 [英] Flexbox wraps outside of container

问题描述

我创建了一个标题，其中包括一个带flexbox的导航.我的问题是，只要屏幕大小调整到大约. 1200像素的换行和我的导航按钮溢出到容器外部-我该如何解决?

I've created a header including a navigation with flexbox. My problem is, as soon as the screen gets resized to approx. 1200px the line wraps and my navigation buttons spill outside of thecontainer - how can I fix this?

http://codepen.io/TimRos/pen/xGVwQE

.main-nav {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: flex-end;
    height: 150px;
}

谢谢！

推荐答案

只需删除固定高度(height: 150px;).当菜单项像这样包装时，这将使导航栏调整大小:

Simply remove the fixed height (height: 150px;). This will let the nav resize when the menu items wrap like this:

.main-nav {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: flex-end;
}

这篇关于Flexbox包装在容器外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！