前端flex布局一行放三个盒子

可以使用flex布局的`flex-wrap`属性和`flex-basis`属性来实现一行放三个盒子的效果。具体的代码如下：

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    
    .box {
        flex-basis: 33.33%;
        background-color: #ccc;
        height: 100px;
        margin: 10px;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

在上面的代码中，我们首先创建一个包含三个盒子的容器`container`。通过设置`display: flex;`将容器设置为flex布局。然后，使用`flex-wrap: wrap;`来控制当一行放不下三个盒子时，自动换行。

接着，我们为每个盒子设置`flex-basis: 33.33%;`，这样每个盒子的宽度就会占据容器的1/3。

最后，我们给每个盒子添加一些样式，比如设置背景色、高度和外边距等。

这样，就可以实现一行放三个盒子的效果了。