我正在尝试使用FlexBox设计子菜单。
FlexBox默认行为是为所有子元素提供相同的大小。
这会在显示子菜单时导致所有项目展开。
使用Flexbox时有什么办法可以避免这种情况吗?
Codepen:https://codepen.io/dsomekh/pen/oeogGq
<style>
.single_tag{
display:flex;
flex-direction:column;
margin-right:6px;
background-color:#ADD8E6;
margin-bottom:6px;
padding:2px;
border-radius: 5px;
border:2px solid red;
}
.container{
display:flex;
justify-content:center;
}
.dropdown-content {
display: none;
flex-direction:column;
}
.dropdown-content_second {
display: none;
flex-direction:column;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.single_tag:hover .dropdown-content {
display: flex;
}
</style>
<html>
<div class="container">
<div class="single_tag">First div
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="single_tag">Second div
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="single_tag">Third div
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</html>
答案 0 :(得分:7)
align-items: flex-start;
将有效。
.container
&#13;
.single_tag {
display: flex;
flex-direction: column;
margin-right: 6px;
background-color: #ADD8E6;
margin-bottom: 6px;
padding: 2px;
border-radius: 5px;
border: 2px solid red;
}
.container {
display: flex;
align-items: flex-start;
justify-content: center;
}
.dropdown-content {
display: none;
flex-direction: column;
}
.dropdown-content_second {
display: none;
flex-direction: column;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.single_tag:hover .dropdown-content {
display: flex;
}
&#13;