如何解决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-->
解决方法
所以我在 css 中将这行代码 align-content: flex-start;
添加到我的 .main_gallery 类并解决了我的问题。行之间不再有间隙,任何数量的视频缩略图都从上到下对齐。
希望这能帮助像我这样的其他新手,如果他们遇到同样的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。