水平对齐两个 div，垂直对齐第三个 div

Question

我有 3 个 div，我希望两个 div 水平放置，第三个 div 垂直放置。

.parent{
  display: flex;
/*    flex-direction: column;
   */
}
.child{
  height:100px;
  width:100px;
  border: 1px solid red;
  flex: 1 1 160px;
}
.child2{
  align-self:flex-start;
}

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

我必须保持与代码片段相同的 HTML 结构，以实现移动设备的响应式布局。在移动布局中，“B”介于“A”和“c”之间，所以我想使用“order”属性来实现。

我试过用 flex 和 table-row 来做，但似乎无法让它工作。

Answer 1

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout

.parent{
 display: grid;
 grid-template-columns: auto auto;

}
.child{
  height:100px;
  width:100px;
  border: 1px solid red;
}
.child2{
  grid-row: 1/3;
  grid-column: 2;
  height: 150px;
}

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

Answer 2

试试这个：

.grid-container {
     display: grid;
     grid-template-columns: auto auto auto;
     grid-gap: 10px;
     background-color: #2196F3;
     padding: 10px;
     border-radius:10px;
}
 .grid-container > div {
     background-color: rgba(255, 255, 255, 0.8);
     text-align: center;
     padding: 20px 0;
     font-size: 30px;
     border-radius:10px;
}
 .item1 {
     grid-row-start: 1;
}
 .item2 {
     grid-row-start: 2;
}
 .item3 {
     grid-area: right;
     grid-row-start: 1;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>