css justify-content總結

0 環境

• 系統：win10
• 編輯器：idea
• 瀏覽器：谷歌

1 前言

不是專業搞前端的 看着css文檔 justify-content用着迷迷糊糊的 雖然能用過 但用着就很難受

2 准備

菜鳥教程在線源碼

3 概念

justify-content 屬性定義了瀏覽器之間，如何分配順着彈性容器主軸(或者網格行軸) 的元素之間及其周圍的空間 是不是看着挺雲里霧里的 我直接放棄 找了國外網站
翻譯過來是 justify-content屬性是Flexible Box Layout模塊的子屬性。它定義了沿着主軸的對齊。當一行上的所有伸縮項目都是不靈活的，或者是靈活的，但已經達到最大尺寸時，它有助於分配多余的空閑空間。當項目溢出行時，它還對項目的對齊方式施加一些控制。但還是不夠粗暴，HTML5與CSS網頁設計基礎的書上提了空白兩字，換句話 主軸元素(彈性布局 + 沿着主軸的對齊方式/元素之間空白怎么分配的問題)(菜鳥理解 不對之處 請指正)

4 實現對比

1 flex-xxx和center

由下圖可見 大致歸納 把整個div看成一個整體 把它放在主軸方向哪個位置(怎么個對齊法) 比如開始 中間 最后(左 中 右)

2 space-xxx

結合字面理解 + 下圖，主軸元素間的空白分配 between 每個元素之間有空白 around 圍繞每個元素的空白(最外面元素外側的空白 * 2 == 兩個元素之間的空白) evenly 空白平均分配(最外面元素外側的空白 == 每個元素之間的空白) 可以看作around + between