justify-content

justify-content是flex布局中的一個屬性，用來調整container中的items布局

• flex-start (default): 每個item從起點開始依次排布
• flex-end: 每個item從尾部開始依次向起點排布
• center: items沿中心排布
• space-between: items從左到右依次排布，第一個item在起點，最后一個item在終點
• space-around: items從左到右間隔相同距離排布
• space-evenly: items從左到右任意連個相鄰item的距離與第一個item距起點的距離以及最后一個item距終點的距離都相等

從上到下效果如圖：

align-items

align-item與justify-content相似，也具有多個屬性值

• flex-start: 每個item上邊緣沿著container的上邊緣線分布
• flex-end: 每個item下邊緣沿著container的下邊緣線分布
• center: 每個item沿著container的水平中心線分布
• baseline: 每個item沿著它們的基準線分布
• stretch (default): 每個item延長自己至與container等高分布

從上到下效果如圖

注意當flex-direction: colum時，注意方向的變化

總結

以上是生活随笔為你收集整理的justify-content与align-items解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。