3

Resulta que tengo una grilla de thumbs y estoy usando por primera vez flexbox por su sencillez y menor uso de líneas en el código.

Quiero ubicar siempre arriba a la derecha un banner de publicidad, el problema está en que se carga en la tercera ubicación de la primera fila, pero en pantallas grandes donde tienen más de tres columnas por fila no sé como ubicarla al estilo float: right;. No quiero usar javascript porque demora unos mili segundos en actuar, y el cambio es evidente.

Aquí les dejo una ilustración por si no me expliqué bien: Este es el código por el momento:

body {
  margin: 50px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0px;
}
ul li {
  width: calc(20% - 15px);
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}
ul li.ad {
  background-color: #ff00d8;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
</ul>

4
  • Si entiendo bien los elementos van cayendo o subiendo dependiendo del ancho de la ventana y lo que se busca es que el ad siempre esté a la derecha?
    – user22721
    Commented el 8 jun. 2018 a las 18:56
  • Exacto @KacosPro, la idea es que siempre se ubique arriba a la derecha. En el ejemplo me falto agregar mas filas.
    – tomillo
    Commented el 8 jun. 2018 a las 19:00
  • Y siempre está en esa posición? No es posible cambiarlo a la primera?
    – user22721
    Commented el 8 jun. 2018 a las 19:01
  • Siempre, no puedo cambiarlo.
    – tomillo
    Commented el 8 jun. 2018 a las 19:04

2 respuestas 2

2

Prueba usando order.

Por defecto, los elementos flexibles se presentan en el orden de origen. Sin embargo, la orderpropiedad controla el orden en que aparecen en el contenedor flexible.

Si vamos dando valor a la propiedad order podemos establecer el orden de los elementos, por ejemplo, tenemos 3 div's, pues ponemos order:1, order:3 y order:2 a cada uno, y se van a posicionar de la manera que hemos especificado.

Te dejo la documentación.

body {
  margin: 50px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0px;
}
ul li {
  width: calc(20% - 15px);
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}
ul li.ad {
  background-color: #ff00d8;
  order: 1;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
</ul>

5
  • Impresionante la velocidad de la respuesta. Muchas gracias. Pero me ha faltado un detalle, no solo es una fila de 5 divs, sinó es una grilla de mínimo 20 divs. Lo he probado con order: 5 pero se ubica debajo de toda la grilla.
    – tomillo
    Commented el 8 jun. 2018 a las 18:53
  • Tienes que ir jugando junto con los demas elementos, la página que he compartido lo explica muy bien. Commented el 8 jun. 2018 a las 18:55
  • Debes hacer un div display:flex para cada fila del grid y alli darle el order al elemento que quieres que vaya al final Commented el 8 jun. 2018 a las 19:03
  • Lo pude corroborar y funciona bien. De todas maneras no puedo resolver el problema del responsive, porque debería si estoy en una pantalla de 1600px el ad se ubica order: 5;, pero cambio a 1400px el ad debería tener order: 4;. La única manera de hacer eso es usando Javascript y me gustaría evitarlo.
    – tomillo
    Commented el 8 jun. 2018 a las 19:10
  • Este ya es otro asunto, puedes resolverlo con jquery... pero debes formular una nueva pregunta, tu actual pregunta ya esta resuelta Commented el 8 jun. 2018 a las 19:11
1

Puedes lograr lo que quieres declarando el order: -1; al elemento que siempre quieres que esté arriba y asignarle flex-direction: row-reverse; al contenedor

Pruebalo a pantalla completa y cambia el ancho de esta :)

body {
  margin: 50px;
}

ul {
  flex-direction: row-reverse;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0px;
}

ul li {
  width: 2rem;
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}

ul li.ad {
  order: -1;
  background-color: #ff00d8;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Ahora si aparte quieres que los elementos caigan al inicio de la siguiente fila puedes declarar justify-content: flex-end;

body {
  margin: 50px;
}

ul {
  flex-direction: row-reverse;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style-type: none;
  padding: 0px;
}

ul li {
  width: 2.5rem;
  height: 150px;
  background-color: #9e9f9a;
  margin: 0 15px 20px 0;
}

ul li.ad {
  order: -1;
  background-color: #ff00d8;
}
<ul>
  <li></li>
  <li></li>
  <li class="ad"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

4
  • Gracias, pero no se aplicaría en mi caso porque debe darse el corte de 3/4/5 thumbs por fila.
    – tomillo
    Commented el 8 jun. 2018 a las 19:16
  • @tomillo edité mi respuesta, debería satisfacer los requerimientos ahora
    – user22721
    Commented el 8 jun. 2018 a las 19:26
  • Gracias por la ayuda @KacosPro!
    – tomillo
    Commented el 8 jun. 2018 a las 19:36
  • De nada @tomillo :D
    – user22721
    Commented el 8 jun. 2018 a las 19:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.