风动之石的博客

flex 布局

flex 父容器宽度无法自适应子元素宽度

假设有个水平的菜单列表，该列表可在水平方向可滚动，使用flex进行实现的代码如下：

<div class="menu-list-ctn">
    <ul class="menu-list">
        <li class="menu-item">menu1</li>
        <li class="menu-item">menu2</li>
        <li class="menu-item">menu3</li>
        <li class="menu-item">menu4</li>
        <li class="menu-item">menu5</li>
        <li class="menu-item">menu6</li>
        <li class="menu-item">menu7</li>
        <li class="menu-item">menu8</li>
    </ul>
</div>

<style>
.menu-list {
    display: flex;
    flex-wrap: nowrap;
}
.menu-item {
    flex: none;
    padding: 10px;
    font-size: 16px;
    line-height: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

但是现在出现一个问题，通过开发工具 Elements 可查看到，无论是.menu-list-ctn还是.menu-list的宽度都是414px（假设视口宽度为414px）。

.menu-list-ctn 的 width.menu-list 的 width

可是，视口宽度内并没有完全显示出所有菜单项，说明.menu-list的实际宽度应该不止414px。

解决方案：给.menu-list元素添加width: max-content。

.menu-list {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}
1
2
3
4
5

flex布局最后一行列表左对齐

张鑫旭 - 让CSS flex布局最后一行列表左对齐的N种方法open in new window