布局子元素

布局容器内的子元素

要自定义布局容器中元素的大小和位置，请对容器的子元素使用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>

排序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>

有关上述示例中使用的指令（如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>