详细文档请翻阅AngularMaterial官方文档

Please read Angular Material offical document for more details.


子元素水平+垂直居中children elements vertical and horizontal center alignment

All you need to do is put layout="row" layout-align="center center" on parent element.

          <div class="parent-wrapper"
            layout="row"
            layout-align="center center">
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
          </div>
        

layoutattribute can be "row" or "column"
First value in attribute layout-align is for vertical alignment and the second one is for horizontal. A playground can be found in angular material official document

响应布局mediaQuery

mediaQuery definitions:

BreakpointMediaQuery (pixel range)Activates when device
xs'(max-width: 599px)'width < 600px
gt-xs'(min-width: 600px)'width >= 600px
sm'(min-width: 600px) and (max-width: 959px)'600px <= width < 960px
gt-sm'(min-width: 960px)'width >= 960px
md'(min-width: 960px) and (max-width: 1279px)'960px <= width < 1280px
gt-md'(min-width: 1280px)'width >= 1280px
lg'(min-width: 1280px) and (max-width: 1919px)'1280px <= width < 1920px
gt-lg'(min-width: 1920px)'width >= 1920px
xl'(min-width: 1920px)'width >= 1920px

All those media query suffix could be applied to all the element attribute metioned in this page
below is one usage example onlayout

          <div class="parent-wrapper"
            layout="row"
            layout-sm="column"
            layout-align="center center">
            <div class="small-block"></div>
            <div class="small-block"></div>
            <div class="small-block"></div>
          </div>
        
Decrease the width of your browser window to see the change.

子元素布局Children Layout

          <div class="parent-wrapper"
            layout="row"
            layout-align="center center">
            <div class="small-block red" flex="25">flex="25"</div>
            <div class="small-block green" flex="33">flex="33"</div>
            <div class="small-block blue" flex>flex</div>
          </div>
        
Decrease the width of your browser window to see the change.
flex="25"
flex="33"
flex

Currently, the flex attribute value is restricted to multiples of five, 33 or 66.
目前flex的值只能是33,66或者5的倍数

To see more other layout options like flex-order,flex-offset plesase visit the Official Document

其他选项Extra Options