✍ 📁 🙈 🙉 🙊
HTML
window Resize
html 測試 左入右出
!>
html 測試 上入下出
!>
html 測試 單入單出
!>
html 測試 左單右單
!>
CSS justify-content
CSS justify-content 屬性介紹
內容物會依照交錯軸線排列成一行。
屬性
描述
center
置中對齊
start
對齊主軸線最前端
end
對齊主軸線最終端
flex-start
靠左對齊
flex-end
靠右對齊
left
從左邊位置開始排列
right
從右邊位置開始排列
space-between
分散對齊
space-around
分散對齊( 左右邊 間距一半)
space-evenly
均分對齊(左右邊 間距一致)
stretch
均勻排列每個元素
inherit
繼承
initial
最初的
revert
恢復
revert-layer
還原層
unset
取消设定
CSS flex-direction 屬性介紹
這個屬性是用來控制主軸方向,預設值為由左到右
屬性
描述
row
水平顯示
row-reverse
水平顯示 逆轉
column
垂直顯示
column-reverse
垂直顯示 逆轉
initial
最初的
inherit
繼承
00
CSS align-items 屬性介紹
相交軸上彈性項目的對齊位置。
屬性
描述
center
置中對齊
flex-start
靠上對齊
flex-end
靠下對齊
stretch
內容撐滿
baseline
對齊 flex 基準線
initial
最初的
00
CSS main div { justify-content :
center
start
end
flex-start
flex-end
left
right
space-between
space-around
space-evenly
stretch
inherit
initial
revert
revert-layer
unset
; }
CSS main div { align-items :
center
flex-start
flex-end
stretch
baseline
initial
; }
CSS main div { flex-direction :
row
row-reverse
column
column-reverse
initial
inherit
; }
1
2
3
4
00
Edit
#html div
#style
#script
#javascript
#CSS
#flex Order
#CSS flex Order
#flex: initial
#flex: auto
#flex: none
#flex: 1
#flex: 1 1 auto
#改變比例
#改變比例
#CSS align-items
#CSS flex-direction
#CSS justify-content
#row
#column
#row-reverse
#column-reverse
#flex
#baseline
沒有留言:
張貼留言
較新的文章
較舊的文章
首頁
訂閱:
張貼留言 (Atom)
沒有留言:
張貼留言