默认情况下,元素都排在一行上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
设置 flex-basis 时要注意的是需要把 flex-grow (放大) & flex-shrink (缩小) 设置 0,不放大也不缩小,在这个状态下 flex-basis 才有效果
<style type="text/css">
	.main.nowrap{
		flex-wrap: nowrap;  /* 默认:不换行 */
	}
	.main.wrap{
		flex-wrap: wrap;  /* 换行,第一行在上方 */
	}
	.main.wrap-reverse{
		flex-wrap: wrap-reverse; /* 换行,第一行在下方 */
	}
	.main.w20 .child{
		flex : 0;
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis :  20%;
	}
</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>

查看基础样式