Flexbox 和可扩展/手风琴侧菜单问题

问题描述

我目前有一个包装类，其中我有一个可扩展的侧边菜单和并排的主要内容部分。侧边菜单是一个复选框，用于过滤主区域内的内容，但我注意到当内容/项目小于区域时，行会分开，但我需要它们保持正常的 flex 开始，行之间的间距相等.

有没有办法让主区域不受侧边栏的影响，无论它是完全展开还是收缩？

.main-content {
  display: flex;
}

.outer-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  justify-content: start;
  width: 100%;
  height: 100%;
}

.main_gallery {
  width: 80%;
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 0;
}

a {
  text-decoration: none;
}


/* side bar section */

.side-bar {
  margin-top: .6rem;
  flex: 0 0 12em;
  min-height: 0em;
}

ol {
  list-style-type: none;
  padding-left: 0;
  font-size: .8em;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 12rem;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active,.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: rgb(255,255,255);
  display: none;
  overflow: hidden;
  text-align: left;
}

<div class="outer-wrapper">
  <div class="main-content">
    <!-- side bar -->
    <div class="side-bar">
      <button class="accordion">Misc.</button>
      <div class="panel">
        <ol>
          <li>
            <input type="checkBox" category="misc" id="demo reel,reel"> Demo Reel
          </li>
          <li>
            <input type="checkBox" category="misc" id="promo"> Promo
          </li>
          <li>
            <input type="checkBox" category="misc" id="setup,set up"> Setup
          </li>
          <li>
            <input type="checkBox" category="misc" id="settings"> Settings
          </li>
          <li>
            <input type="checkBox" category="misc" id="training,webinar"> Training
          </li>
        </ol>
      </div>
    </div>
    <!-- end of side-bar-->
    <main class="main_gallery">
      <!-- template video thumbnails go here -->
    </main>
  </div>
  <!-- end of main-content-->
</div>
<!-- end of outer-wrapper-->

flexbox issue

解决方法

所以我在 css 中将这行代码 align-content: flex-start; 添加到我的 .main_gallery 类并解决了我的问题。行之间不再有间隙，任何数量的视频缩略图都从上到下对齐。希望这能帮助像我这样的其他新手，如果他们遇到同样的问题。

accordion flexbox flexbox