本文介绍了Flexbox包装在容器外部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个标题,其中包括一个带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包装在容器外部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!