如何使用flexboxes来保持元素一起移动？

Question

我正在尝试制作一个流畅的布局，我遇到了一个问题，即我的元素相对于彼此移动到位。我只是希望我的布局根据我的数字移动。

.flex-container {
  display: -webkit-flex;
  display: flex;
  flex-direction: column wrap;
}

#firstNum {
  position: absolute;
  background-color: yellow;
  font-size: 320%;
  left: 43%;
  top: 15%;
}

@media all and (min-height: 50%) {
  #firstNum {
    order: 1;
  }
  #sign {
    order: 2;
  }
  #line {
    order: 3;
  }
}

#sign {
  position: absolute;
  background-color: red;
  font-size: 320%;
  left: 40%;
  top: 24%;
}

#line {
  position: absolute;
  font-size: 320%;
  top: 28%;
  left: 40%;
}

<div class="flex-container">
  <div id="firstNum" class="flex-item"> &nbsp 10 <br> &nbsp 35</div>
  <div id="sign" class="flex-item">+</div>
  <div id="line" class="flex-item">_____</div>
</div>

我想要的是什么：

它的作用：

任何帮助将不胜感激。我想为此使用flexbox。

Answer 1

这是纯粹使用flexbox的解决方案。您可能需要调整边距以获得所需的间距。

我还将线条简单地改为顶部边框，这比设计文本以获得水平线更好。

.flex-container
{
    display: -webkit-flex;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 150px;
    margin: 0 auto;
    
}

#firstNum {    background-color:yellow;
    font-size: 320%;
    order: 1;
    margin-left: -10px;
}
@media all and (min-height: 50%){
    #firstNum {order:2;}
    #sign {order:1;}
    #line {order:3;}

}


#sign
{   

    background-color:red;
    font-size: 320%;
    order: 0;
    height: 70px;
    align-self: flex-end;
    margin-bottom: 10px;
    position: relative;
}

#line
{   
    border-top: 2px solid #000;
    order: 2;
    width: 100%;
}

<div class ="flex-container">
<div id = "firstNum" class ="flex-item"> &nbsp 10 </br> &nbsp 35</div>
<div id = "sign" class="flex-item">+</div>
<div id ="line" class="flex-item"></div>
</div>