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

前端之家收集整理的这篇文章主要介绍了Angular Material 教程之布局篇 (三) : 布局子元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

布局子元素

布局容器内的子元素

自定义布局容器中元素的大小和位置,请对容器的子元素使用flexflex-orderflex-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-smlayout-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" 不会增长或收缩。 大小基于其widthheight值。
flex="initial" 将根据需要收缩。 以基于其widthheight值的大小开始。
flex="auto" 将根据需要增长和收缩。 以基于其widthheight值的大小开始。
flex="grow" 将根据需要增长和收缩。 开始尺寸为100%。 与flex="100"相同。
flex="nogrow" 会根据需要收缩,但不会增长。 以基于其widthheight值的大小开始。
flex="noshrink" 会根据需要增长,但不会缩小。 以基于其widthheight值的大小开始。

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

有关上述示例中使用的指令(如hidehide-gt-mdshow-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
原文链接:https://www.f2er.com/angularjs/148697.html

猜你在找的Angularjs相关文章