[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