Angular Material Flexbox 概念

Flexbox 簡介:

主要應用在RWD,概念在於 flex-container main axis 代表排列的主軸、cross asix 是垂直於 main axis 的主軸,這兩者方向可以改變

Flexbox 重點在於可以自適應螢幕大小而進行改變,並且也提供豐富的屬性可以自行條配。

Angular Material 使用 flexbox css 並且加上 mediaQuery (同 bootstrap responsive ),透過指定

@media (min-with: 980px)

設定可以應用的大小

如果要深入理解,建議參考: 深入解析 CSS Flexboxmedia query 小撇步

可以使用 scss 顯示 layout 的差異:

可以參考 https://tburleson-layouts-demos.firebaseapp.com/#/docs 可以直接看出各項 layout 的變化