flex布局中使用flex-wrap實現換行的項目代碼例子
在Flexbox布局中，`flex-wrap`屬性用於控制子元素（flex items）是否應該在單行內顯示，或者是否應該換行到下一行。當`flex-wrap`設置為`wrap`或`wrap-reverse`時，flex items會在需要時換行。
下面是一個簡單的代碼示例，展示了如何在flex容器中使用`flex-wrap`屬性來實現子元素的換行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Wrap Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* 允許子元素換行 */
justify-content: space-around; /* 在主軸上均勻分布子元素 */
padding: 10px;
border: 1px solid #ccc;
}
.item {
flex: 0 0 200px; /* 每個項目占用200px的寬度，不放大也不縮小 */
height: 100px;
margin: 10px;
background-color: #f0f0f0;
display: flex;
align-items: center; /* 在交叉軸上居中 */
justify-content: center; /* 在主軸上居中 */
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<!-- 更多項目會繼續換行顯示 -->
</div>
</body>
</html>在上面的示例中，`.container`是一個flex容器，並且設置了`flex-wrap: wrap;`。這意味著當子元素（`.item`）的總寬度超過容器寬度時，它們會自動換行到下一行。同時，通過`justify-content: space-around;`，我們在主軸（默認是水平方向）上均勻分布了子元素。
`.item`類定義了每個flex item的樣式，其中`flex: 0 0 200px;`表示每個item的基礎寬度是200px，並且它們不會根據可用空間進行放大或縮小。你可以根據需要調整這些值來適應你的布局。
