請(qǐng)大家?guī)臀曳治鲆幌滤膱D案的實(shí)現(xiàn)過(guò)程，為什么要分成兩個(gè)類來(lái)寫（box類和column類）？flex-basis:100%又是什么意思 ?？可以理解為height:100% ；width:100%嗎？而六圖案就不用分成兩個(gè)類，比四圖案實(shí)現(xiàn)簡(jiǎn)單了。是不是因?yàn)榱鶊D案第一行堆滿了，所以設(shè)置了flex-wrap:wrap就自動(dòng)換行了？
4 回答
楓芒i
TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超0個(gè)贊
至于六圖案不用分類是因?yàn)槊恳恍兄荒芊胖?個(gè)點(diǎn)，6個(gè)剛好堆滿兩行，所以只要交叉軸上下對(duì)齊就可以啦（不需要像四圖案一樣還要兩端對(duì)齊）
楓芒i
TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超0個(gè)贊
flex-basis:100%是占用主軸空間的100%，在這里可以理解為占用寬度為100%。box類是整個(gè)的大盒子，里面有2個(gè)column類，每個(gè)column類在這里就是一行（因?yàn)閷挾?00%），根據(jù)align-content：space-between后，這兩行就上下對(duì)齊了，然后
.column{display:?flex;????????????
flex-direction:column;????????????
justify-content:space-between;
} 每一行里的兩個(gè)篩點(diǎn)兩端對(duì)齊、
俠客島的含笑
TA貢獻(xiàn)552條經(jīng)驗(yàn) 獲得超285個(gè)贊
不好意思啊。其實(shí)這個(gè)我也不是很了解（捂臉）。然后，我去找了下源代碼
????????<div?class="container?six?box6"> ????????????<div?class="column"> ????????????????<span?class="?item"></span> ????????????????<span?class="?item"></span> ????????????</div> ????????????<div?class="column"> ????????????????<span?class="?item"></span> ????????????????<span?class="?item"></span> ????????????</div> ????????????<div?class="column"> ????????????????<span?class="?item"></span> ????????????????<span?class="?item"></span> ????????????</div> ????????</div>
.box6{
????????????display:?flex;
????????????flex-warp:wrap;
????????????align-content:space-between;
????????}
????????.box6?.column{
????????????display:?flex;
????????????flex-direction:column;
????????????justify-content:space-between;
????????}flex-direction主軸為垂直方向，起點(diǎn)在上沿。也就是三列。
- 4 回答
- 3 關(guān)注
- 3088 瀏覽
添加回答
舉報(bào)
0/150
提交
取消