align-content 屬性介紹

霈霈 已發佈 2019-6-21

範例程式碼: https://codepen.io/peiqun/pen/RzjaqL

  1. align-content: flex-start:每行貼齊交錯軸線最前端
    alt text

  1. align-content: flex-end:每行貼齊交錯軸線最末端
    alt text

  1. align-content: center:每行對齊交錯軸線中間
    alt text

  1. align-content: space-between:第一行與最後一行分別對齊交錯軸線最前端與最末端
    alt text

  1. align-content: space-around:每行平均分配每行間距
    alt text

  1. align-content: stretch:預設值,每行內容元素全部撐開至 flexbox 大小
    alt text

關於筆者

暱稱:霈霈

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