在之前使用彈性布局的時(shí)候,align-content與align-items的概念混淆不清,自己特意寫(xiě)了一下來(lái)區(qū)分.
以下是我的初始代碼:
初始代碼
效果是這樣子的:
初始的效果
測(cè)試一:
那么? 在.bigbox中添加align-items:center以后,側(cè)軸居中了,效果如下:
align-items:center
在.bigbox中添加align-content:center以后,沒(méi)有發(fā)生改變:如下:
align-content:center
由此? 我們可以看到align-content對(duì)單行是沒(méi)有效果的.
測(cè)試二:
我們把這兩個(gè)盒子變成兩行(給.box1加一個(gè)margin-right:100px; 給.bigbox加一個(gè) flex-wrap: wrap;屬性讓這兩個(gè)小盒子兩行顯示)
如下圖:
兩行顯示初始圖
在.bigbox中添加align-items:center以后,側(cè)軸居中了,效果如下:
align-items: center;
在.bigbox中添加align-content:center以后,效果如下,
align-content:center
那么? 通過(guò)對(duì)比可以發(fā)現(xiàn)align-content:center對(duì)單行是沒(méi)有效果的,而align-items:center不管是對(duì)單行還是多行都有效果,而在我們?nèi)粘ｉ_(kāi)發(fā)中用的比較多的就是align-items.
