使用justify-content: center时列表被剪切

基础概念

justify-content: center 是 CSS Flexbox 布局中的一个属性，用于设置容器内子元素在主轴（水平轴）上的对齐方式。当设置为 center 时，子元素会在主轴上居中对齐。

类型

justify-content 属性有以下几种值：

flex-start：子元素在主轴的起始位置对齐。
flex-end：子元素在主轴的结束位置对齐。
center：子元素在主轴上居中对齐。
space-between：子元素在主轴上均匀分布，两端对齐。
space-around：子元素在主轴上均匀分布，每两个子元素之间有相同的空间。
space-evenly：子元素在主轴上均匀分布，包括两端。

应用场景

justify-content: center 常用于需要在容器内水平居中对齐子元素的场景，例如：

导航栏中的菜单项居中。
页面中的标题或按钮居中。
表格或列表的标题居中。

问题及解决方法

当使用 justify-content: center 时，列表被剪切的问题通常是由于容器的高度不足导致的。以下是可能的原因和解决方法：

原因

容器高度不足：如果容器的高度不足以容纳所有子元素，那么超出部分会被剪切。
溢出隐藏：如果容器设置了 overflow: hidden，超出部分会被隐藏。

解决方法

增加容器高度：
增加容器高度：
调整子元素高度：
调整子元素高度：
使用 overflow: auto 或 overflow: scroll：
使用 overflow: auto 或 overflow: scroll：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Center Example</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            height: 100vh;
            border: 1px solid #000;
        }
        .item {
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>