This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(4个答案)
12个月前关闭。
我正在尝试制作一个侧边栏,它垂直对齐数量不确定的列表项。当项目数到达侧边栏底部时,它们通过flex分组到列中。
我的问题是,我希望边栏的宽度在关闭时为100px宽,在打开时为列的宽度。如果对打开状态使用固定宽度,则会发生以下情况:
![html - 基于子伸缩元素的容器宽度-LMLPHP html - 基于子伸缩元素的容器宽度-LMLPHP](https://dbsqp.com/x.php?x=R0NDOXRiRkloRWVtU0VQSWdSVkxueWZSV0N3OXQzZk10WDUxZEg9R0tKLXl2WmlFbEg9WjQ%3D)
HTML格式:
SCSS公司:
我怎样才能做到这一点?如何打开边栏并显示所有列?
更新:侧边栏的高度可以根据屏幕大小而变化。我用原始设置更新了代码。
更新2:我测试了两个解决方案,尽管@itay gal是一个聪明的CSS选项,但它缺乏动画能力。因为我已经在使用JS,所以我最终使用了@pablo darde解决方案。
我对@pablo darde's做了一个小小的改动,这样它就可以使用可变高度的侧边栏:
(4个答案)
12个月前关闭。
我正在尝试制作一个侧边栏,它垂直对齐数量不确定的列表项。当项目数到达侧边栏底部时,它们通过flex分组到列中。
我的问题是,我希望边栏的宽度在关闭时为100px宽,在打开时为列的宽度。如果对打开状态使用固定宽度,则会发生以下情况:
HTML格式:
<nav class="sidebar">
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
...
</li>
</ul>
</nav>
SCSS公司:
.sidebar {
background: #ccc;
width: 100px;
ul {
list-style-type: none;
height: 100vh;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
li {
background: #000;
height: 80px;
width: 80px;
}
}
&:hover
{
//width: !?!?!?!
}
}
我怎样才能做到这一点?如何打开边栏并显示所有列?
更新:侧边栏的高度可以根据屏幕大小而变化。我用原始设置更新了代码。
更新2:我测试了两个解决方案,尽管@itay gal是一个聪明的CSS选项,但它缺乏动画能力。因为我已经在使用JS,所以我最终使用了@pablo darde解决方案。
我对@pablo darde's做了一个小小的改动,这样它就可以使用可变高度的侧边栏:
const sidebar = document.querySelector('.sidebar');
const ul = sidebar.querySelector('ul');
const li = ul.querySelector('li');
const showRemainder = () => {
const ulHeight = ul.clientHeight;
const liHeight = li.clientHeight;
const width = ul.clientWidth * Math.ceil(ul.children.length / (ulHeight / liHeight));
sidebar.style.maxWidth = `${width}px`;
}
最佳答案
我真的只想用CSS和你的代码来编码,但是没有成功。我用一些JavaScript代码达到了预期的结果。请让我知道,如果你能得到一些更优雅的。
注意pointer-events: none;
元素中的cssli
属性。这里很重要。如果您想在href
s中使用li
,我相信需要进行一些重构。
const sidebar = document.querySelector('.sidebar');
const ul = sidebar.querySelector('ul');
const showRemainder = () => {
const width = ul.clientWidth * Math.ceil(ul.children.length / 5);
sidebar.style.maxWidth = `${width}px`;
}
const hideRemainder = () => {
sidebar.style.maxWidth = '80px';
}
sidebar.addEventListener('mouseover', showRemainder);
sidebar.addEventListener('mouseout', hideRemainder);
.sidebar {
background: #ccc;
max-width: 80px;
width: auto;
height: 400px;
overflow: hidden;
transition: all 0.5s ease;
}
.sidebar ul {
list-style-type: none;
height: 400px;
display: flex;
padding: 0;
margin: 0;
flex-flow: column wrap;
align-content: flex-start;
}
.sidebar ul li {
display: flex;
pointer-events: none;
justify-content: center;
align-items: center;
background: #000;
height: 80px;
width: 80px;
color: #fff;
box-sizing: border-box;
border: 1px solid #fff;
}
<nav class="sidebar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</nav>