Angular Material 教程之布局篇 (三) : 布局子元素

布局子元素

布局容器内的子元素

要自定义布局容器中元素的大小和位置，请对容器的子元素使用flex，flex-order和flex-offset属性：

<div layout="row">
  <div flex="20">
    [flex="20"]
  </div>
  <div flex="70">
    [flex="70"]
  </div>
  <div flex hide-sm hide-xs>
    [flex]
  </div>
</div>

将flex指令添加到布局的子元素，并且子元素将flex（增长或收缩）以适合其他子元素未使用的区域。 flex定义子元素将如何相对于其父容器和容器内的其他子元素调整其大小。

<div layout="row" layout-wrap>
  <div flex="30">
    [flex="30"]
  </div>
  <div flex="45">
    [flex="45"]
  </div>
  <div flex="25">
    [flex="25"]
  </div>
  <div flex="33">
    [flex="33"]
  </div>
  <div flex="66">
    [flex="66"]
  </div>
  <div flex="50">
    [flex="50"]
  </div>
  <div flex>
    [flex]
  </div>
</div>

布局子元素的flex指令可以给出一个从0到100的整数值。元素将拉伸到与该值匹配的可用空间的百分比。目前，flex指令值被限制为5，33或66的倍数。

例如: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100"

<div layout="row">
  <div flex-gt-sm="66" flex="33">
    flex 33% on mobile, <br>and 66% on gt-sm devices.
  </div>
  <div flex-gt-sm="33" flex="66">
    flex 66%  on mobile, <br>and 33% on gt-sm devices.
  </div>
</div>

有关上述示例中使用的hide-sm和layout-wrap等响应式flex指令的更多信息，请参阅布局参数章节。

其他Flex值

还有由Angular Material提供的其他flex值，可以提高灵活性并使API更容易理解。

<div layout="row" layout-wrap>
  <div flex="none">
    [flex="none"]
  </div>
  <div flex>
    [flex]
  </div>
  <div flex="nogrow">
    [flex="nogrow"]
  </div>
  <div flex="grow">
    [flex="grow"]
  </div>
  <div flex="initial">
    [flex="initial"]
  </div>
  <div flex="auto">
    [flex="auto"]
  </div>
  <div flex="noshrink">
    [flex="noshrink"]
  </div>
  <div flex="0">
    [flex="0"]
  </div>
</div>

标记	介绍
flex	将根据需要增长和收缩。 以0％的大小开始。 与flex="0"相同. 注意：当父容器没有设置显式高度时，在IE 11中有一个已知的具有此属性的错误。
flex="none"	不会增长或收缩。 大小基于其width和height值。
flex="initial"	将根据需要收缩。 以基于其width和height值的大小开始。
flex="auto"	将根据需要增长和收缩。 以基于其width和height值的大小开始。
flex="grow"	将根据需要增长和收缩。 开始尺寸为100％。 与flex="100"相同。
flex="nogrow"	会根据需要收缩，但不会增长。 以基于其width和height值的大小开始。
flex="noshrink"	会根据需要增长，但不会缩小。 以基于其width和height值的大小开始。

排序HTML元素

将flex-order指令添加到布局子元素，可以在布局容器中设置其顺序位置。接受从-20到20的任何整数值。

<div layout="row">
  <div flex flex-order="-1">
    <p>[flex-order="-1"]</p>
  </div>
  <div flex flex-order="1" flex-order-gt-md="3">
    <p hide-gt-md>[flex-order="1"]</p>
    <p hide show-gt-md>[flex-order-gt-md="3"]</p>
  </div>
  <div flex flex-order="2">
    <p>[flex-order="2"]</p>
  </div>
  <div flex flex-order="3" flex-order-gt-md="1">
    <p hide-gt-md>[flex-order="3"]</p>
    <p hide show-gt-md>[flex-order-gt-md="1"]</p>
  </div>
</div>

API	断点覆盖默认值时的设备宽度
flex-order	设置默认布局顺序，除非被另一个断点覆盖。
flex-order-xs	width < 600px
flex-order-gt-xs	width >= 600px
flex-order-sm	600px <= width < 960px
flex-order-gt-sm	width >= 960px
flex-order-md	960px <= width < 1280px
flex-order-gt-md	width >= 1280px
flex-order-lg	1280px <= width < 1920px
flex-order-gt-lg	width >= 1920px
flex-order-xl	width >= 1920px

有关上述示例中使用的指令（如hide，hide-gt-md和show-gt-md）的详细信息，请查看布局参数章节。

HTML元素偏移

将flex-offset指令添加到布局子元素，以在布局容器中设置其偏移百分比。 值必须是5或33/66的倍数。这些偏移量相对于前面的元素或容器左边界建立一个margin-left。

当使用flex-offset时，margin-left偏移被应用...不管你选择的flex-order或使用了flex-direction：reverse。

<div layout="row">
  <div flex="66" flex-offset="15">
    [flex-offset="15"]
    [flex="66"]
  </div>
  <div flex>
    [flex]
  </div>
</div>

API	断点覆盖默认值时的设备宽度
flex-offset	除非被另一个断点覆盖，否则设置默认margin-left偏移量（基于％）。
flex-offset-xs	width < 600px
flex-offset-gt-xs	width >= 600px
flex-offset-sm	600px <= width < 960px
flex-offset-gt-sm	width >= 960px
flex-offset-md	960px <= width < 1280px
flex-offset-gt-md	width >= 1280px
flex-offset-lg	1280px <= width < 1920px
flex-offset-gt-lg	width >= 1920px
flex-offset-xl	width >= 1920px