CODEWITHSUNDEEP
htmlcssvue.jsflexboxgrid
Jefferson Bruchado
Jefferson Bruchado

Reputation: 908

Positioning grid with flexbox

I'm trying to positioning a list of items using flexbox, I already resolved that problem with comun way, but I want to improve my code to use better tools like flexbox, I have something like this:

enter image description here

But I want to do this with Flexbox, positioning it this way:

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>

My css bellow:

.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;
    }
  }
}

I started to learn Flexbox, but I still don't understand how it works, any help to improve this css?

Upvotes: 0

Views: 75

Answers (2)

Effection
Effection

Reputation: 192

I suggest using Grid. Keep in mind that flexbox is only for one-dimensional position (either row or column but not both). Grid is (like the name tells you) for 2-dimensional layouts. You can predefine the rows and columns etc. Especially with "grid-template-areas" it makes it amazingly easy to build a grid.

Upvotes: 0

Marco
Marco

Reputation: 104

Here is an simple example:

<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>

Upvotes: 1

Related Questions