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>
 

查看更多关于9. 专题 - Angular的Flex Layout的详细内容...