当前位置: 首页 > 資訊 >

[Day 5] 排版布局Stack

Stack 組件用於沿垂直或水平軸的佈局

也是RWD應用的選項之一

複雜度跟所選參數都可以輕易使用

在material-ui 直翻大概是棧板的意思

排版布局面 就是由 貨櫃>欄格>棧板 很符合貨運的規格

希望不要像長榮一樣 塞車就好

照慣例從
Day4
Fork 一份 作為Day 5

獻上程式碼

<Stack
justifyContent="center"
alignItems="center"
 direction={{ xs: 'column', sm: 'row' }}
spacing={{ xs: 1, sm: 2, md: 4 }}
> 
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>

其中 這邊需要一點flex的觀念

可以在justifyContent(橫軸) 選擇置中 置左 置右
alignItems(垂直)選擇置中 置頂 置底
特別的是 可以用物件的方式
選擇每個寬度要呈現的方式
direction={{ xs: 'column', sm: 'row' }}
在XS寬度 是直向排列 sm寬度則是 橫向排列

Day 5