Layout of angular material (2): layout container

Layout container

Layout and container

Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally（layout="row"）Or vertically（layout="column"）。

Note that if thelayoutInstruction has no value, thenrowIs the default layout direction.

• row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container.

• column: items arranged vertically.max-width = 100%andmax-heightIs the height of the item in the container.

<! -- horizontal layout -- >
<div layout="row">
  <div flex>First item in row</div>
  <div flex>Second item in row</div>
</div>

<! -- vertical layout -- >
<div layout="column">
  <div flex>First item in column</div>
  <div flex>Second item in column</div>
</div>

Please note that,layoutAffects only the flow direction of the immediate child elements of the container.

Layout and response breakpoints

As described in the introduction to the layout, you can use breakpointsAlias suffixChanges the layout based on the device view size.

To make the layout automatically change based on the device screen size, use the followinglayout One of the APIs sets the layout direction for devices with view width:

layout API	flex API	When the device is activated
layout	flex	Sets the default layout orientation unless overridden by another breakpoint.
layout-xs	flex-xs	width < 600px
layout-gt-xs	flex-gt-xs	width >= 600px
layout-sm	flex-sm	600px <= width < 960px
layout-gt-sm	flex-gt-sm	width >= 960px
layout-md	flex-md	960px <= width < 1280px
layout-gt-md	flex-gt-md	width >= 1280px
layout-lg	flex-lg	1280px <= width < 1920px
layout-gt-lg	flex-gt-lg	width >= 1920/b>px
layout-xl	flex-xl	width >= 1920px

For the following code, when narrowing the browser window width, notice that the flow direction changes to mobile devices（xs）Ofcolumn。 When you expand, it is reset togt-smView sizerow。

<div layout="row" layout-xs="column">
  <div flex>
    I'm above on mobile, and to the left on larger devices.
  </div>
  <div flex>
    I'm below on mobile, and to the right on larger devices.
  </div>
</div>

For more options (such as padding, alignment, etc.), see the section “layout parameters.”.