Estoy tratando de aprender y practicar flexbox creando mis propios diseños. No estoy del todo seguro de por qué el col-1-of-2 de la fila inferior no se alinea con el col-1-of-2 derecho en la segunda fila. Lo mismo con col-1-of-4.

¿Es el grid-box mejor para esto porque tiene más control del espacio de la columna? Intenté hacer que el margen principal 5px y el relleno secundario 5px estuvieran cerca, pero todavía no estaban alineados al 100%. Supongo que también debemos tener en cuenta el tamaño de la pantalla.

.row {
  display: flex;
}

.col {
  display: flex;
  flex-grow: 1;
  border: 1px solid purple;
  margin: 1rem;
}

.col-1-of-1 {
  width: 100%;
  justify-content: center;
  background: lightblue;
}

.col-1-of-2 {
  width: 50%;
  justify-content: center;
  background: orange;
}

.col-1-of-3 {
  width: 33%;
  justify-content: center;
  background: lightgreen;
}

.col-1-of-4 {
  width: 25%;
  justify-content: center;
  background: lightcoral;
}
<div class="row">
  <div class="col col-1-of-1">
    <p>col-1-of-1</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
</div>


<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>
2
sinoraj 6 oct. 2019 a las 06:03

1 respuesta

La mejor respuesta

¿Es el grid-box mejor para esto porque tiene más control del espacio de la columna?

Se está acercando a comprender la naturaleza del problema en esta declaración. El problema es que está tomando un motor de diseño que se construyó con el objetivo de permitir que los elementos crezcan y reduzcan su tamaño y espacio entre ellos para obtener un ajuste orgánico, y esperar que se comporte como una cuadrícula rígida. sistema.

Específicamente, el problema surge cuando agrega los elementos margin a .col. Para cualquier fila determinada, está tratando de encajar el contenido en 100% width, pero el contenido width se suma a 100% más lo que sea margin existe para la cantidad de elementos que ha incluido.

Por ejemplo, la fila superior será 100% más 2rem (margin a cada lado). La siguiente fila son dos elementos de 50% ancho, que se suma a 100%, más el 4rem agregado para los 1rem margin s en ambos lados de la dos elementos.

flex se encarga de esto por usted: masajea los tamaños y espacios para que todo encaje bien y limpiamente en ese espacio de ancho 100%. Sin embargo, las cosas se ponen difíciles cuando comienzas a mezclar los tipos .col-1-of-<num> y esperas que se alineen bien, flex está haciendo su trabajo para asegurarse de que encajan , lo cual está por venir a costa de tenerlos alineados .

Dicho esto, lo que quieres es posible con flex. La siguiente solución simplemente usa un calc() para asegúrese de que se tengan en cuenta los margin s al configurar el width del elemento, en lugar de que .col-1-of-1 sea 100%, es calc(100% - 2em), {{X6 }} se convierte en calc(50% - 2em), y así sucesivamente.

Puede haber otras formas de abordar esto usando flex que también funcionarían, posiblemente jugando con flex propiedad, o la justify-content; o puede consultar grid. ¡Buena suerte!


.row {
  display: flex;
}

.col {
  display: flex;
  flex-grow: 1;
  border: 1px solid purple;
  margin: 1rem;
}

.col-1-of-1 {
  width: calc(100% - 2rem);
  justify-content: center;
  background: lightblue;
}

.col-1-of-2 {
  width: calc(50% - 2rem);
  justify-content: center;
  background: orange;
}

.col-1-of-3 {
  width: calc(33% - 2rem);
  justify-content: center;
  background: lightgreen;
}

.col-1-of-4 {
  width: calc(25% - 2rem);
  justify-content: center;
  background: lightcoral;
}
<div class="row">
  <div class="col col-1-of-1">
    <p>col-1-of-1</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
</div>

<div class="row">
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
  <div class="col col-1-of-3">
    <p>col-1-of-3</p>
  </div>
</div>


<div class="row">
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-4">
    <p>col-1-of-4</p>
  </div>
  <div class="col col-1-of-2">
    <p>col-1-of-2</p>
  </div>
</div>
1
Alexander Nied 6 oct. 2019 a las 03:38