Rujukan Layout
Atribut layout mengawal struktur, kedudukan, dan aliran.
Paparan & Bekas
Flex
- Pintasan Flex -
flex:1,flex:auto,flex:none - Asas Flex -
basis:0,basis:full,basis:[value] - Arah Flex -
row,col,row-reverse,col-reverse - Flex Wrap -
wrap,nowrap,wrap-reverse - Item Flex -
grow,shrink,grow:0,shrink:0 - Order -
order:first,order:last,order:1-12
Penjajaran
- Justify Content -
justify:start,justify:center,justify:between - Justify Items -
justify-items:start,justify-items:center - Justify Self -
justify-self:start,justify-self:center - Align Content -
content:start,content:center - Align Items -
items:start,items:center,items:end - Align Self -
self:start,self:center,self:end - Place Content -
place-content:center - Place Items -
place-items:center - Place Self -
place-self:center - Ringkas -
center,start,end,between
Grid
- Grid Columns -
grid-cols:1-12 - Grid Rows -
grid-rows:1-6 - Column Span -
col-span:1-12,col-span:full - Row Span -
row-span:1-6,row-span:full - Auto Flow -
grid-flow:row,grid-flow:col,grid-flow:dense - Auto Sizing -
auto-cols:fr,auto-rows:min
Kedudukan
- Kedudukan -
static,relative,absolute,fixed,sticky - Inset -
inset:0,top:0,right:0,bottom:0,left:0 - Z-Index -
z:base,z:low,z:mid,z:high,z:top
Utiliti
- Keterlihatan -
visible,invisible - Overflow -
overflow:hidden,overflow:auto,overflow:scroll - Overscroll -
overscroll:contain,overscroll:none - Nisbah Aspek -
aspect:square,aspect:video - Columns -
cols:1-4 - Object Fit -
object:cover,object:contain - Object Position -
object-pos:top,object-pos:center - Float & Clear -
float:left,float:right,clear:both - Isolation -
isolate - Box Sizing -
box-border,box-content
Jadual
- Runtuhan Sempadan -
border-collapse,border-separate - Jarak Sempadan -
border-spacing:0,border-spacing:[value] - Susun Atur Jadual -
table-auto,table-fixed - Kedudukan Kapsyen -
caption-top,caption-bottom
Contoh Pantas
html
<div layout="flex col tab:row center wrap" space="g:medium">
Susun atur flexbox responsif
</div>