默认情况下,元素都排在一行上 flex-wrap 属性定义如何换行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
	.main.nowrap{
		flex-wrap: nowrap;  /* 默认:不换行 */
	}
	.main.wrap{
		flex-wrap: wrap;  /* 换行,第一行在上方 */
	}
	.main.wrap-reverse{
		flex-wrap: wrap-reverse; /* 换行,第一行在下方 */
	}
</style>


<div class="main direction">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
	<div class="child">13</div>
	<div class="child">14</div>
	<div class="child">15</div>
	<div class="child">16</div>
	<div class="child">17</div>
	<div class="child">18</div>
	<div class="child">19</div>
	<div class="child">20</div>
	<div class="child">21</div>
	<div class="child">22</div>
	<div class="child">23</div>
	<div class="child">24</div>
	<div class="child">25</div>
	<div class="child">26</div>
	<div class="child">27</div>
	<div class="child">28</div>
	<div class="child">29</div>
	<div class="child">30</div>
	<div class="child">31</div>
</div>

查看基础样式