在不更改 HTML 的情况下为移动和桌面视图重新安排 flex 项目

Question

我正在为我的网页使用 Angular Material。我必须以不同的方式为桌面和移动设备显示相同的布局。以下是布局和相应的代码：

移动布局 手机码

<div layout="column" style="text-align: center;">
    <div flex-order="0">
        <div class="child-1">Child 1</div>
    </div>
    <div flex-order="1">
        <div class="child-2">Child 2</div>
    </div>
    <div flex-order="2">
        <div class="child-3">Child 3</div>
    </div>
</div>

桌面布局 桌面代码

<div layout="row" style="text-align: center;">
    <div flex-order="0">
        <div class="child-2">Child 2</div>
    </div>
    <div flex>
        <div layout="column">
            <div flex-order="0">
                <div class="child-1">Child 1</div>
            </div>
            <div flex-order="1">
                <div class="child-3">Child 3</div>
            </div>
        </div>
    </div>
</div>

CSS代码

.child-1, .child-2, .child-3 {
    border: 1px solid black; 
    background-color: gray; 
    margin-bottom: 10px;
}
.child-1, .child-3 {
    height: 20px;
}
.child-2 {
    height: 40px;
}

有一个明显的 HTML 代码重复来显示不同的布局。有没有什么方法可以在不重复代码的情况下显示这两种布局？

Answer 1

试试这个

   <div layout-sm="column" layout-gt-sm="row">
      <div hide-sm hide-xs style="background:grey" layout-margin> Child 2</div>
      <div layout="column" layout-align="space-around">
          <div  style="background:grey" layout-margin> Child 1</div>
          <div hide-gt-sm style="background:grey"layout-margin > Child 2</div>
          <div  style="background:grey" layout-margin> Child 3</div>
      </div>
   </div>

Codepen here

Answer 2

这是一个干净的解决方案，使用简单的 html 结构，对移动设备和桌面都相同，并且在更大的屏幕上对 re-position 和 child2 进行媒体查询。

.parent {
  display: flex;
  flex-flow: column;
  position: relative;
}

.child1, .child2, .child3 {
    border: 1px solid black; 
    background-color: gray; 
    margin-bottom: 10px;
    height: 20px;
}
.child2 {
    height: 40px;
}

@media screen and ( min-width: 500px) {
  .child2 {
    position: absolute;
    top: 0;
    left: 0;
    height: 52px;
    width: 150px
  }
  .child1,
  .child3 {
    margin-left: 150px;
  }
}

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
  <div class="child3">Child 3</div>  
</div>

在不更改 HTML 的情况下为移动和桌面视图重新安排 flex 项目

Re-arranging flex items for mobile and desktop view, without changing the HTML

html

css

flexbox

angular-material