Ir al contenido principal

Destacado

Node | Debug nestjs app en vscode

Recientemente me encontré trabajando en un proyecto basado en nestjs y una cosa que me sorprendió fue la cantidad de console.log distribuidos por todo el repositorio, señal de que el equipo lo usaba como su principal forma de depurar. Un poco old school para mí gusto para ser sincero, así que, ¿Por qué no usar vscode a tu favor? La siguiente configuración ademas de correr la app,  enlaza  el debugger al proceso node. En MacOS:   Ejecutar > Agregar configuración... Listo, ya podemos poner breakpoints en donde lo requiramos, sencillo no? C you space cowboy!

Flexbox | Posicionar flex items a la derecha/izquierda

Esta es probablemente una de las situaciones con las que más me  he topado a la hora de armar layouts y gracias a flexbox implementarlo es bastante sencillo.

El secreto está en los márgenes automáticos:

Cada que aplicamos un auto margen a un flex item, su margen ocupa todo el espacio disponible (extra) del contenedor flex, dependiendo de la dirección donde apliquemos dicho margen.


Veámoslo en acción:
<div class="flex">
  <div class="child">
   Item 1
  </div>
</div>
.flex {
  display: flex;
  height: 300px;
}

.child {
  margin-left: auto;
  height: 25px;
  border: 1px solid #ccc;
  padding: 5px;
}
Como podemos observar el flex item se posicionó a la derecha, ya que su margen izquierdo se extendió para ocupar todo el espacio disponible dentro del contenedor flex.

Si quisiéramos hacer lo contrario, es decir posicionar el flex item a la izquierda lo haríamos de la siguiente manera:
.child {
  margin-right: auto;
  height: 25px;
  border: 1px solid #ccc;
  padding: 5px;
}

Este ejemplo no es tan claro ya que solo tenemos 1 flex item pero las cosas se ponen interesantes conforme agregamos mas flex items o la aplicamos a otros márgenes como el margin-top o incluso a todos (margin: auto).


Puedes jugar un poco y ver los resultados:



Espero que les haya sido útil,  See you space cowboy!

También si les interesa pueden hecharle un ojo a la serie sobre flexbox layouts

Comentarios

Entradas populares