试图使div中的项目均匀分布答案

【问题标题】：Trying to make items in a div spread between evenly试图使div中的项目均匀分布
【发布时间】：2021-07-07 08:03:45
【问题描述】：

我目前正在尝试使容器 div 中的项目均匀分布在一行上。我想要的结果如下：

目前我似乎无法弄清楚如何让项目在同一条线上并在可用空间之间均匀分布？

这是我目前拥有的：

前 2 段文本应该放在左边，然后接下来的 2 段必须放在中间。但是在彼此之间均匀分布也应该没问题！我尝试使用 justify-content: space-between 但我似乎无法让它工作。

我目前的代码：

<template>
  <div class="container">
    <div class="wrap-text">
      <span class="function-text-bold">{{ functionBold }}</span>
      <span class="function-text">{{ functionDescription }}</span>
    </div>
    <div class="wrap-text">
      <span class="amount-text">Aantal toegelaten studenten per sessie</span>
      <div class="click-amount">
        <button><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z"/></svg></button>
        <span class="function-text">{{ amountPerSession }}</span>
        <button><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg></button>
      </div>
    </div>
    <button>Stel je tijdslot in</button>
    <!-- Rounded switch -->
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
  </div>
</template>

<script>
export default {
  name: "CompanyJobOfferList",
  data() {
    return {};
  },
  props: {
    functionBold: {
      type: String,
      required: true,
    },
    functionDescription: {
      type: String,
      required: true,
    },
    amountPerSession: {
      type: String,
      required: false,
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  margin: 0 auto;
}

.wrap-text {
  display: flex;
  flex-direction: column;
  height: 70px;
  justify-content: space-evenly;
}

.click-amount {
  vertical-align: middle;
  display: flex;
}

.click-amount button{
  border: none;
  width: 25px;
  height: 25px;
  margin: 0px 10px;
}

button {
  border: 2px solid var(--accent-color);
}
</style>

【问题讨论】：

使用width:100%; ?
@frankfurt 这似乎不起作用。

标签： html css vue.js flexbox

【解决方案1】：

使用表格：Working example

  <table style="table-layout: auto; width:100%">
    <thead>
      <th></th>
    </thead>
    <tbody>
      <tr>
        <td style="width:50%; padding: 0px 20px">
          <div>
            Functie
          </div>
          <div>
            Functieomschrijving
          </div>
        </td>
        <td style="width:50%; padding: 0px 20px">
          <div>
            Aantal toegelaten stunden per sissie
          </div>
          <div>
            [ - ] 0 [ + ]
          </div>
        </td>
        <td style="width:1px; padding: 0px 20px">
          <button style="border: 2px solid black; height: 3rem; width: 10rem">
            Stel je tijdslot in
          </button>
        </td>
        <td style="width:1px; padding: 0px 20px">
          toggle
        </td>
      </tr>
    </tbody>
  </table>

【讨论】：