如图 我现在一共有10个图标+10个文字，怎么才可以设置一行5个图标后自动换行，触及到了未学的知识

如何让div里面的内容自动换行？
如图 我现在一共有10个图标+10个文字，怎么才可以设置一行5个图标后自动换行，第二行又是5个图标，触及到了未学的知识，求，谢谢！

img

用flex布局
display:flex;
flex-wrap:wrap

解决的办法很多，我贴个浮动的比较基础的，应该能看懂


<!DOCTYPE html>
<html lang="zh_en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_1{
            /*大盒子的宽度 = 小盒子宽度 * 5 + 盒子之间的间距*/
            width: 500px;
            background: #F4C6A6;
            float: left;
        }
        .div_1 div{
            width: 80px;
            height: 80px;
            background: #c53e3e;
            float: left;

            /*控制盒子之间的间隙*/
            margin: 10px;
        }
    </style>
</head>
<body>

    <div class = "div_1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

    </div>
</body >
</html>

给前面五个在用一个div包起来就好了 或者给他们最大的父级盒子设置宽度