寂雨
CSS flex
Try
HackMD
寂雨
·
Follow
Last edited by
寂雨
on
Feb 4, 2020
Linked with GitHub
Contributed by
CSS flex
Flex 外容器屬性
display:flex;
flex-flow
flex-direction(文字方向)
column(上至下,左至右)
column-reverse(column相反)
row(左至右,上至下)
row-reverse (row相反)
flex-wrap(換行)
nowrap(單行)
wrap(換行)
wrap-reverse(換行,內容翻轉)
justify-content(水平對其)
flex-end(對其最左邊)
flex-start(對其最右邊,預設)
center(置中)
space-between(移到兩旁)
space-around(間距平均)
align-items(單個垂直對其)
flex-end(對其最下面)
flex-start(對其最上面)
center(置中)
stretch(內容撐開同flex-height)
baseline(對其基準線)
align-content(多個垂直對其)
flex-end(對其最下面)
flex-start(對其最上面)
center(置中)
space-between(靠兩旁)
space-around(間距平均)
stretch(內容撐開同flex-height)
Flex 內元件屬性
flex(1.2.3)
1.flex-grow(伸展比例分配)
2.flex-shrink(壓縮比例分配)
3.flex-basis(元件基準值)
align-self(單個垂直對其>align-items)
flex-end(對其最下面)
flex-start(對其最上面)
center(置中)
stretch(撐開同flex-height)
baseline(對其基準線)
order(排序)
(1234
…
) (指定交換對象)
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up
Comment