如何在css中使用flexbox对齐图像和文本？

Question

我无法使用flexbox对齐这些元素。我在尝试 做一个响应式设计，但我只能知道如何使用flex-column和flex-row。

1. 移动版
2. 网络版本

手机版：



＆＃13;
＆＃13;
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.vilkaar-item-row {
  display: flex;
  flex-direction: row;
}

.vilkaarp {
  display: flex;
  justify-content: flex-start;
}

table {
  border-collapse: separate;
  border-spacing: 0.25em;
}

td,
th {
  text-align: left;
  padding: 0
}

td {
  max-width: none;
}
＆＃13;
<div class="flex-row">
  <div class="flex-vilkaar-column">
    <div class="vilkaar-item-row"><img src="svg/dollar.svg" alt="">
      <div class="vilkaarp">Timehonorar: 295kr</div>
    </div>
    <div class="vilkaar-item-row"><img src="svg/pin.svg" alt="">
      <div class="vilkaarp">Undervisningssted: Oslo</div>
    </div>
    <div class="vilkaar-item-row"><img src="svg/bil.svg" alt="">
      <div class="vilkaarp">Reisetillegg: Ingen</div>
    </div>
    <div class="vilkaar-item-row"><img src="svg/kryss.svg" alt="">
      <div class="vilkaarp">Timekanselering: Meldes minst 24 timer i forkant.</div>
    </div>

    <div class="vilkaar-item-row"><img src="svg/book.svg" alt="">
      <div class="vilkaarp">Matematikkfag: T, R1, R2</div>
    </div>
  </div>

  <div class="flex-vilkaar-column">

    <div class="flex-row">

      <div class="vilkaar-item-row"><img src="svg/calendar.svg" alt=""></div>


      <div>

        <table>

          <tr>
            <th>Tilgjengelighet:</th>
          </tr>

          <tr>
            <td>Man</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Tirs</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Ons</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Tors</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Fre</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Lør</td>
            <td>Hele dagen</td>
          </tr>
          <tr>
            <td>Søn</td>
            <td>Hele dagen</td>
          </tr>

        </table>

      </div>

    </div>




  </div>
  <div class="vilkaar-item-row"><img src="svg/shield.svg" alt="">
    <div class="vilkaarp">Bakgrunnsskjekk: Fornyet 03/01/2017 </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

网络版：



＆＃13;
＆＃13;
<div class="flex-row">
  <div class="flex-vilkaar-column">
    <div class="vilkaar-item-row"><img src="svg/dollar.svg" alt="">
      <div class="vilkaarp">Timehonorar: 295kr</div>
    </div>
    <div class="vilkaar-item-row"><img src="svg/pin.svg" alt="">
      <div class="vilkaarp">Undervisningssted: Oslo</div>
    </div>
    <div class="vilkaar-item-row"><img src="svg/bil.svg" alt="">
      <div class="vilkaarp">Reisetillegg: Ingen</div>
    </div>
    <div class="vilkaar-item-row"><img src="svg/kryss.svg" alt="">
      <div class="vilkaarp">Timekanselering: Meldes minst 24 timer i forkant.</div>
    </div>

    <div class="vilkaar-item-row"><img src="svg/book.svg" alt="">
      <div class="vilkaarp">Matematikkfag: T, R1, R2</div>
    </div>
  </div>

  <div class="flex-vilkaar-column">

    <div class="flex-row">

      <div class="vilkaar-item-row"><img src="svg/calendar.svg" alt=""></div>


      <div>

        <table>

          <tr>
            <th>Tilgjengelighet:</th>
          </tr>

          <tr>
            <td>Man</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Tirs</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Ons</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Tors</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Fre</td>
            <td>16:00-22:00</td>
          </tr>
          <tr>
            <td>Lør</td>
            <td>Hele dagen</td>
          </tr>
          <tr>
            <td>Søn</td>
            <td>Hele dagen</td>
          </tr>

        </table>

      </div>

    </div>
  </div>
  <div class="vilkaar-item-row"><img src="svg/shield.svg" alt="">
    <div class="vilkaarp">Bakgrunnsskjekk: Fornyet 03/01/2017 </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;