css - 如何在 layout = row/column in angular material 中 float 元素？

Question

我正在使用以下代码将两个 div block 排成一行

 <div layout="column" layout-gt-xs="row" layout-align="center center" id="row">
  <div id="a">a</div>
  <div id="b">b</div>
</div>

css 是这样的

#row div {
  width: 80px;
  height: 80px;
  border: 1px solid black;
  margin:10px;
  text-align:center;
}

我想让它响应而不是在小屏幕上，它重新排列看起来像 this

如何在 Angular Material 中实现这一点？ 我尝试使用

#b {
     float: left !important;
  }

但似乎 float 在布局容器内不起作用。

这是 demo

Answer 1

不要将 flex 布局与 float 混合使用。您可以使用 angular-material 的 flex-order 来执行此操作。 https://material.angularjs.org/latest/layout/children

<div flex-order="1">a</div>
<div flex-order="0" flex-order-gt-xs="2">b<br/>(pull it to the left)</div>