Сетка позиционирования с флексбоксом - PullRequest
Новая
       9

Сетка позиционирования с флексбоксом

0 голосов
/ 29 октября 2019

Я пытаюсь позиционировать список элементов, используя flexbox , я уже решил эту проблему с помощью comun way, но я хочу улучшить свой код, чтобы лучше использовать инструменты как flexbox, у меня есть что-то вроде этого:

enter image description here

Но я хочу сделать это с Flexbox , позиционированиеэто таким образом :

enter image description here

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?

Ответы [ 2 ]

1 голос
/ 29 октября 2019

Вот простой пример: 

<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>
0 голосов
/ 29 октября 2019

Я предлагаю использовать Grid. Имейте в виду, что flexbox предназначен только для одномерной позиции (строки или столбца, но не обоих). Сетка - это (как вам подсказывает название) для двухмерных макетов. Вы можете предварительно определить строки и столбцы и т. Д. Особенно с помощью "grid-template-area" это позволяет невероятно легко построить сетку.

...