时间戳

首页 > 解决方案 > 使用 flexbox 定位网格

html - 使用 flexbox 定位网格

问题描述

我正在尝试使用flexbox定位项目列表，我已经用 comun 方式解决了这个问题，但是我想改进我的代码以使用更好的工具，比如 flexbox，我有这样的东西：

在此处输入图像描述

但我想用Flexbox做到这一点，这样定位：

在此处输入图像描述

HTML

<div
  v-for="item in list"
  :key="item.id+Math.random()"
  class="neo-form-toggle-list__item neo-form-toggle neo-form-toggle--checkbox slideout--checkbox container--checkbox"
>
  <div class="checkbox--group">
    <input
      class="neo-form-toggle__field"
      type="checkbox"
      :id="item.id"
      name="rule"
      :checked="checked"
    />
    <label
      class="neo-form-toggle__label checkbox--label rule"
      :class="item.templateRule.title.length > 5 ? 'rule__big--title' : 'rule__small--title'"
      :for="item.id">
      {{ item.templateRule.title }}
    </label>
    <p class="item">{{ item.templateRule.description }}</p>
  </div>
</div>

我的CSS如下：

.neo-form-toggle__label {
  &.checkbox--label {
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    float: right;
    margin-right: 3%;
    &.rule {
      font-weight: bold;
      &__big--title {
        margin-right: 1rem;
      }
      &__small--title {
        margin-right: 5rem;
      }
    }
  }
}

.neo-form-toggle {
  &.neo-form-toggle--checkbox {
    &.checkbox--margin {
      margin-right: 2.25rem !important;
    }
  }
}

.neo-form-toggle {
  &.neo-form-toggle--checkbox {
    &.slideout--checkbox {
      width: 13rem;
    }
    &.checkbox--margin {
      margin-right: 2.25rem !important;
    }
    &.container--checkbox {
      margin-right: 5rem;
      margin-bottom: 0;
    }
  }
}

我开始学习 Flexbox，但我仍然不明白它是如何工作的，对改进这个 css 有什么帮助吗？

标签： htmlcssvue.jsflexboxgrid

解决方案

这是一个简单的例子：

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        display: flex;
        width: 300px;
        padding: 5px;
      }

      .checkbox {
        margin: 2px 6px 0 0;
      }

      .labels {
        flex: 1;
      }

      .label__title {
        font-size: 14px;
      }

      .label__subtitle {
        font-size: 11px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <input type="checkbox" class="checkbox" />
      <div class="labels">
        <p class="label__title">Faturamento presumido</p>
        <p class="label__subtitle">Modelo atualizado mensalmente</p>
      </div>
    </div>
  </body>

推荐阅读