CSS 自动换行 flex-wrap

在网页开发中，经常有这样的情况：当元素内容长度超出其父元素宽度时，内容会溢出而不会自动换行显示。为了解决这个问题，可以使用 CSS 的 flex-wrap 属性来控制元素在父容器中的自动换行。

什么是 flex-wrap？

flex-wrap 是 CSS 中 flex 布局的一个属性，用于控制 flex 容器中的项目如何换行。默认情况下，项目都排在一行上，如果项目长度超出了父容器的宽度，就会溢出不换行。而设置了 flex-wrap 属性后，可以让项目自动换行，以适应父容器的宽度。

如何使用 flex-wrap？

要使用 flex-wrap 属性，首先需要定义一个 flex 容器。在该容器中设置 flex-wrap 属性，可以有以下几种取值：

nowrap：默认值，所有项目都排在一行上，不换行。
wrap：项目在必要的时候换行，第一行在上方。
wrap-reverse：项目在必要的时候换行，第一行在下方。

下面是一个示例代码，演示了如何使用 flex-wrap 属性实现自动换行：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap</title>
<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
    }
    .item {
        background-color: #f0f0f0;
        margin: 5px;
        padding: 10px;
    }
</style>
</head>
<body>
<div class="container">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="item">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
</body>
</html>

在上面的代码中，我们定义了一个 .container 容器，设置了 display: flex; 和 flex-wrap: wrap; 属性。并在容器里放置了四个 .item 项目，这些项目的内容长度超过了容器的宽度。运行代码，就会发现项目在必要的时候自动换行，以适应容器的宽度。

`nowrap` 示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex No Wrap</title>
<style>
    .container {
        display: flex;
        width: 200px;
    }
    .item {
        background-color: #f0f0f0;
        margin: 5px;
        padding: 10px;
    }
</style>
</head>
<body>
<div class="container">
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="item">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
</body>
</html>

在上面的示例中，我们将容器的 flex-wrap 属性去掉，即默认情况下的 nowrap。项目都排在一行上，不会自动换行。可以看到，项目的内容超出了容器的宽度，导致内容溢出而不换行显示。