flex-direction: column;和flex-wrap: wrap;同时使用什么效果
时间: 2024-02-04 17:13:29 浏览: 26
当 `flex-direction` 属性设置为 `column`,并且 `flex-wrap` 属性设置为 `wrap` 时,子元素会在垂直方向上排列,并且当它们的总高度超过父元素的高度时,它们会折行到下一列。这种布局方式可以使用在需要显示多个垂直元素的场景,例如产品展示、博客文章列表等。
下面是一个使用 `flex-direction: column;` 和 `flex-wrap: wrap;` 的示例代码:
```html
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
<div class="child">Child 4</div>
<div class="child">Child 5</div>
<div class="child">Child 6</div>
<div class="child">Child 7</div>
<div class="child">Child 8</div>
<div class="child">Child 9</div>
</div>
<style>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
border: 1px solid #ccc;
}
.child {
flex: 0 0 100px;
height: 80px;
margin: 10px;
background-color: #eee;
}
</style>
```
在这个例子中,子元素的高度为80px,每个子元素的宽度为100px,并且设置了 `flex: 0 0 100px;` 让每个子元素的宽度固定为100px。当子元素的总高度超过了父元素的高度时,它们会折行到下一列。如果你想改变子元素的排列顺序,可以使用 `order` 属性。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)