Please enable JavaScript.
Coggle requires JavaScript to display documents.
排版通用類別 (Utilities for layout) (Flexbox 選項 (方向性 (<div class="d-flex…
排版通用類別 (Utilities for layout)
改變顯示display
命名
寫在目標html的class
.d-{value} for xs
沒for 就是通用
value
none
inline
inline-block
table
table-cell
table-row
block
flex
inline-flex
.d-{breakpoint}-{value} for sm, md, lg, and xl.
隱藏元素
none
.d-none
全部
.d-xl-none
Hidden only on xl
.d-lg-none .d-xl-block
Hidden only on lg
Flexbox 選項
使用flex
<div class="d-flex
.d-flex
.d-inline-flex
斷點
.d-md-flex
方向性
<div class="d-flex flex-row
.flex-row
.flex-column
加上斷點
flex屬性
align-items
justify-content
flex-fill
相鄰元素
在相同的寬度上分配所有可用的水平空間
都設定.flex-fill
伸縮值
flex-grow-*
使用它可以使用的所有可用寬度空間
flex-shrink-*
縮小以留在同一行
auto margin
自動隔開
Margin 及 padding
間隔 (Spacing)
格式
{property}{sides}-{breakpoint}-{size}
屬性
m
p
邊緣
t -
b
y
l -
r -
x
size
0
1
$spacer * .25
2
$spacer * .5
3
$spacer
4
$spacer * 1.5
5
$spacer * 3
auto
.mt-0
切換 visibility
<div class="visible">...</div>
<div class="invisible">...</div>