justify-content 屬性介紹

霈霈 已發佈 2019-6-21

justify-content 主要以主軸線來排版,現在有紅、藍、黃三個區塊 包覆在灰色區塊內,設有相同的寬度。
以下是將各種 justify-content 的屬性填入灰色區塊內的效果。

練習範例: https://codepen.io/peiqun/pen/YoEXmr

  1. justify-content: flex-start 預設值,對齊主軸線最前端
    justify-content

  1. justify-content: flex-end 對齊主軸線最終端
    justify-content

  1. justify-content: center 對齊主軸線中央
    justify-content

  1. justify-content: space-around 平均分配寬度和間距
    justify-content

  1. justify-content: space-between 平均分配寬度,第一項和最後一項貼齊邊緣
    justify-content

關於筆者

暱稱:霈霈

介紹:六角學院前端工程師,目前就讀高雄師範大學的軟體工程學系研究所