CSS FlexBox - 具有不同高度的子元素？

Question

CSS FlexBox - 具有不同高度的子元素？

我正在尝试使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pau*_*e_D 8

是.

align-items: flex-start;你的.container意志工作.

.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;
}

Run Code Online (Sandbox Code Playgroud)

<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>
      <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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，1 月前
查看次数：	5824 次
最近记录：	9 年，1 月前