对齐 3 个 div 以实现响应式设计

Question

如何对齐这 3 个 div，例如：pickup:left、phone:middle、delivery:right？我已经从 stackoverflow 中看到了其他 align div 的问题，但不知何故它们不适用于我的代码。我需要这些 div 将它们的位置保持在 (600px-900px) 之间，我的意思是，如果我现在在屏幕上有 600px 并且我将其调整为 900px，那么 div 应该具有相同的位置。

这是html

        <div class="shrinkTopBar">
      <div class="phone">
        <img src="images/pick_it.png" alt="Phone number" />
        <h3>07917569024</h6>
      </div>
      <div class="pickup">
        <img src="images/pick_it.png" alt="Pick it up" />
        <div class="info">
          <h6>Pickup: Yes</h6>
          <p>Borehamwood,London</p>
        </div>
      </div>
      <div class="delivery">
        <img src="images/ship_it.png" alt="Deliver it" />
        <div class="info">
          <h6>Delivered: Yes</h6>
          <p>£5.00</p>
        </div>
      </div>
    </div>

这是我的css

.topBar .shrinkTopBar {
width: 80%;
margin: 0 auto;
margin-top: 30px;
text-align: center;
display: flex;
}

.topBar .phone {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 175px;
height: 40px;
}

.topBar .pickup {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 129px;
height: 40px;
}

.topBar .delivery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 129px;
height: 40px;
}

谢谢！

Answer 1

 <div class="shrinkTopBar">
 <div class="mrg">
  <div class="phone box-in">
    <img src="images/pick_it.png" alt="Phone number" />
    <h3>07917569024</h6>
  </div>
  <div class="pickup box-in">
    <img src="images/pick_it.png" alt="Pick it up" />
    <div class="info">
      <h6>Pickup: Yes</h6>
      <p>Borehamwood,London</p>
    </div>
  </div>
  <div class="delivery box-in">
    <img src="images/ship_it.png" alt="Deliver it" />
    <div class="info">
      <h6>Delivered: Yes</h6>
      <p>£5.00</p>
    </div>
  </div>

.shrinkTopBar .mrg{

    margin:-20px -10px 0;
    }
    .shrinkTopBar .box-in{
    float:left:
    width:33.33%;
    padding:20px 15px 0;
    }