[Vuejs]-Positioning grid with flexbox

by

1👍

✅

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>
👤Marco Escaleira

0👍

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.

👤Effection

Leave a comment