iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
Modern Web

Web前端的探索:30天的驚奇之旅系列 第 16

Day16.CSS<justify-content>屬性

  • 分享至 

  • xImage
  •  

<justify-content>主要以主軸線來排版,且須搭配display:flex做使用

分成以下六種:
justify-content: flex-start: 向主軸的起始位置對齊
https://ithelp.ithome.com.tw/upload/images/20240922/20168468K9RbUyA95M.png

justify-content: flex-end: 向主軸的結束位置對齊
https://ithelp.ithome.com.tw/upload/images/20240922/20168468lcQt2yWRUi.png

justify-content: center: 在主軸上居中對齊
https://ithelp.ithome.com.tw/upload/images/20240922/20168468WSQ9xwZuCr.png

justify-content: space-around: 項目之間的間距平均分佈,項目周圍會有一半大小的空白
https://ithelp.ithome.com.tw/upload/images/20240922/20168468p5EHRTZjbW.png

justify-content: space-between: 項目之間的間距平均分佈,兩端不留空白
https://ithelp.ithome.com.tw/upload/images/20240922/20168468VGWi2aCOkh.png

justify-content: space-evenly: 項目之間的間距和兩端的間距相等
https://ithelp.ithome.com.tw/upload/images/20240922/20168468HA2ikuTxnI.png

以上就是<justify-content>的介紹啦~~~
依照自己想要的樣式去做排版就可以囉~~~
/images/emoticon/emoticon42.gif


上一篇
Day15.CSS<display>標籤
下一篇
Day17.CSS<text-align>屬性
系列文
Web前端的探索:30天的驚奇之旅22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言