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格式:
<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属性。这里很重要。如果您想在hrefs中使用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>

10-07 19:03
查看更多