iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0

align-items主要控制Flex容器内的子元素以交錯軸線來做排版
有以下幾種方式:

align-items:stretch;
align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:baseline;

stretch:填充整個flex容器的高度
https://ithelp.ithome.com.tw/upload/images/20240924/20168468rrb8h3ypp5.png

flex-start:從flex容器的最頂部對齊
https://ithelp.ithome.com.tw/upload/images/20240924/20168468W6t3b6PLZ7.png

flex-end:從flex容器的最底部對齊
https://ithelp.ithome.com.tw/upload/images/20240924/20168468f1aNUUOFfy.png

center:置中對齊
https://ithelp.ithome.com.tw/upload/images/20240924/201684688Kw5JziBAj.png

baseline:對齊內容物的基線
https://ithelp.ithome.com.tw/upload/images/20240924/20168468g10X55hPeR.png

以上為align-items的介紹,今天就先到這啦~~~~
/images/emoticon/emoticon06.gif


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

尚未有邦友留言

立即登入留言