在之前使用彈性布局的時候,align-content與align-items的概念混淆不清,自己特意寫了一下來區分.
以下是我的初始代碼:
初始代碼
效果是這樣子的:
初始的效果
測試一:
那么 在.bigbox中添加align-items:center以后,側軸居中了,效果如下:
align-items:center
在.bigbox中添加align-content:center以后,沒有發生改變:如下:
align-content:center
由此 我們可以看到align-content對單行是沒有效果的.
測試二:
我們把這兩個盒子變成兩行(給.box1加一個margin-right:100px; 給.bigbox加一個 flex-wrap: wrap;屬性讓這兩個小盒子兩行顯示)
如下圖:
兩行顯示初始圖
在.bigbox中添加align-items:center以后,側軸居中了,效果如下:
align-items: center;
在.bigbox中添加align-content:center以后,效果如下,
align-content:center
那么 通過對比可以發現align-content:center對單行是沒有效果的,而align-items:center不管是對單行還是多行都有效果,而在我們日常開發中用的比較多的就是align-items.