9. 专题 - Angular的Flex Layout

• 使用 Angular Flex-Layout 輔助版面布局
• 一般不和bootstrap的布局样式混用
• 容器類 Containers
  • fxLayout
    • row：預設值，由左到右，從上到下
    • column：從上到下，再由左到右
    • row-reverse：與 row 相反
    • column-reverse：與 column 相反
    • wrap：多行
  • fxLayoutWrap
    • 控制容器內子元素的排版方式採用多行方式排列
  • fxLayoutGap
    • 控制容器內子元素的間隔
    • 設定值：可接受這些單位 %、px、vw、vh
  • fxLayoutAlign
    • 控制容器內子元素的對齊方式
    • 設定值
      • main-aixs: start、center、end、space-around、space-between
      • cross-axis: start、center、end、stretch
• 子元素類 Child Elements within Containers
• 特殊響應功能 Special Responsive Features

<div class="container"
     fxLayout="row"
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="33">Item 1</div>
  <div class="item item-2" fxFlex="33">Item 2</div>
  <div class="item item-3" fxFlex="33">Item 3</div>
</div>