flex多行排列超出隐藏

Flex布局是一种用于创建灵活的、响应式网页布局的技术。在Flex布局中，可以使用flex-wrap属性来控制多行排列，并使用overflow属性来实现超出隐藏。

具体实现步骤如下：
1. 将父容器设置为flex布局，可以通过设置display: flex来实现。
2. 设置flex-wrap属性为wrap，这样当子元素超出父容器宽度时，会自动换行排列。
3. 设置overflow属性为hidden，这样当子元素超出父容器高度时，会隐藏超出部分。

下面是一个示例代码：

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
    .item {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

以上代码中，父容器.container使用了flex布局，并设置了flex-wrap属性为wrap，子元素.item设置了固定的宽度和高度。当子元素超出父容器宽度时，会自动换行排列；当子元素超出父容器高度时，超出部分会被隐藏。