CSS Flex弹性布局-换行 作者：马育民 • 2024-12-21 11:56 • 阅读：10002 上接：[CSS Flex弹性布局](https://www.malaoshi.top/show_1GWFrhNvcbZ.html "CSS Flex弹性布局") # flex-wrap属性 `flex-wrap` 属性定义，如果显示不下，如何换行。 默认情况下，子元素都水平显示，**显示不下，就自动缩小** - nowrap：子元素不换行，子元素宽度超过父容器时，宽度自动缩小 - wrap：子元素显示不下，自动换行（宽度不会缩小），剩余空间被所有行平分 [](https://www.malaoshi.top/upload/0/0/1GWFrXmvga0.jpg) - wrap-reverse：倒着换行，即：第一行在下方 [](https://www.malaoshi.top/upload/0/0/1GWFrYuzdw6.jpg) ### 例子 ``` <style> #box{ width: 300px; height: 400px; background-color: aquamarine; display: flex; /* flex-direction: row-reverse; */ /* flex-direction: column; */ /* flex-direction: column-reverse; */ /* flex-wrap:wrap; */ flex-wrap:wrap-reverse; } .goods{ width: 100px; height: 80px; background-color: antiquewhite; /* margin: 5px; */ border: 1px solid red; } </style> ``` ``` <div id="box"> <div class="goods">1</div> <div class="goods">2</div> <div class="goods">3</div> <div class="goods">4</div> </div> ``` # align-content属性 align-content属性，在 **子元素 换行 时才生效**，设置交叉轴方向的对齐方式 与 `flex-direction` 属性有关 当 `flex-direction` 是 `row` 时，即：交叉轴垂直从上到下，有以下值： - stretch（默认值）：剩余空间被所有行平分。[](https://www.malaoshi.top/upload/0/0/1GWFrXmvga0.jpg) - flex-start：所有行从交叉轴起点开始填充，第一行子元素与起始点对齐。 [](https://www.malaoshi.top/upload/0/0/1GWGB4SjxUN.jpg) - flex-end：所有行从交叉轴末尾开始填充，最后一行子元素与终止点对齐。 [](https://www.malaoshi.top/upload/0/0/1GWGB7WgP5a.jpg) - center： 所有行朝向容器的中心填充，每行互相紧挨，相对于容器居中对齐 [](https://www.malaoshi.top/upload/0/0/1GWGB99Kqmk.jpg) - space-between：均匀分布项目，第一行子元素与起始点齐平，最后一行子元素与终止点齐平 [](https://www.malaoshi.top/upload/0/0/1GWGBBiaHEy.jpg) - space-around：所有行在容器中平均分布，相邻两行间距相等。所以，每行之间的间距，比第一行子元素到 父容器顶部的间距 大一倍，同理，比最后一行子元素到 父容器底部的间距 大一倍。 [](https://www.malaoshi.top/upload/0/0/1GWGBF6sQTG.jpg) - space-evenly：每行子元素之间的 **间隔相等**，包括 **两侧子元素到容器边缘的间隔** [](https://www.malaoshi.top/upload/0/0/1GWGBPXU6Y4.jpg) ### 例子 ``` <style> #box{ width: 300px; height: 400px; background-color: aquamarine; display: flex; flex-wrap:wrap; /* align-content: flex-start; */ /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ /* align-content: space-around; */ align-content: space-evenly; } .goods{ width: 100px; height: 80px; background-color: antiquewhite; /* margin: 5px; */ border: 1px solid red; } </style> ``` ``` <div id="box"> <div class="goods">1</div> <div class="goods">2</div> <div class="goods">3</div> <div class="goods">4</div> <div class="goods">5</div> <div class="goods">6</div> </div> ``` # flex-flow `flex-flow` 属性是 `flex-direction` 属性和 `flex-wrap` 属性的简写形式，默认值为 `row nowrap`。 ``` .box { flex-flow: <flex-direction> <flex-wrap>; } ``` 参考： https://www.runoob.com/w3cnote/flex-grammar.html 原文出处：http://malaoshi.top/show_1GWGBTHiKhF.html