首頁猿問 flex布局，骰子圖案

flex布局，骰子圖案

CSS3

undertale 2017-04-06 23:36:50

請大家?guī)臀曳治鲆幌滤膱D案的實現(xiàn)過程，為什么要分成兩個類來寫（box類和column類）？flex-basis:100%又是什么意思 ?？可以理解為height:100% ；width:100%嗎？而六圖案就不用分成兩個類，比四圖案實現(xiàn)簡單了。是不是因為六圖案第一行堆滿了，所以設置了flex-wrap:wrap就自動換行了？

查看完整描述

4 回答

楓芒i

TA貢獻2條經(jīng)驗獲得超0個贊

至于六圖案不用分類是因為每一行只能放置3個點，6個剛好堆滿兩行，所以只要交叉軸上下對齊就可以啦（不需要像四圖案一樣還要兩端對齊）

反對回復 2018-07-23

楓芒i

TA貢獻2條經(jīng)驗獲得超0個贊

flex-basis:100%是占用主軸空間的100%，在這里可以理解為占用寬度為100%。box類是整個的大盒子，里面有2個column類，每個column類在這里就是一行（因為寬度100%），根據(jù)align-content：space-between后，這兩行就上下對齊了，然后

.column{display:?flex;????????????

flex-direction:column;????????????

justify-content:space-between;

} 每一行里的兩個篩點兩端對齊、

反對回復 2018-07-23

俠客島的含笑

TA貢獻552條經(jīng)驗獲得超285個贊

不好意思啊。其實這個我也不是很了解（捂臉）。然后，我去找了下源代碼

????????<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主軸為垂直方向，起點在上沿。也就是三列。