Closed m4n50n closed 1 year ago
hello @m4n50n, perdona que se me olvidó arreglar este ejercicio :(, hice lo que me dijiste, al final tuve que aplicar un margin-right: -260px a la clase pfp para que se me quedara cerquita la clase header; usando solo justify-content: space-between, me los dejaba todo bien alejado pero el header al medio :)
Hola Carlos,
✔ Bastante bien este ejercicio. Has hecho exactamente lo que se pedía y además has usado flexbox para alinear los elementos, así que genial.
👉 Comentarios / Mejoras:
styles.css
esto que has puesto no hace falta:position
, ya que puede confundir bastante y suele aplicarse para cosas muy concretas..options
(línea 24) sería#contenedor-header
(línea 16), el cual ya tiene aplicada la propiedaddisplay: flex
. Cuando aplicas esta propiedad, estás indicando que quieres que todos los "hijos" (es decir, los elementos que están directamente debajo) se alineen siguiendo la lógica de flex. Por lo tanto, bastaría con añadir la propiedadjustify-content: space-between
al padre para que sus hijos se alineen a los extremos sin necesidad de aplicar propiedades adicionales comoposition
,left
, etc... De hecho, toda esta teoría que te cuento la has aplicado en los iconos que hay debajo de la imagen, por lo que debes seguir la misma lógica..alineado-derecha-izq
al que le has asignado este CSS:Esto es correctísimo y por eso te he puesto en el punto 2 que lo hagas igual, ya que estás habilitando flexbox y además le estás diciendo que los hijos se alineen horizontalmente a los extremos con
justify-content: space-between
. Debido a esto, no necesitas poner esto:ya que son propiedades que no van a tener ningún efecto. Primero, porque se alinearán en base a
.alineado-derecha-izq
, y segundo porque la propiedadjustify-content
solo se aplica a elementos que tengandisplay: flex
, y en este caso.alineado-izq
y.alineado-dcha
tienen asignado automáticamentedisplay: block
. Por lo tanto, esta parte no tendría sentido para conseguir lo que queremos.Te apruebo el ejercicio pero te animo a que lo corrijas aplicando todo lo comentado para dejarlo perfecto. Si lo haces, avísame y vuelvo a echarle un vistazo sin problemas.
Puedes leer más sobre flexbox aquí: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
☝ Consejo: Siempre recomiendo dedicar un tiempo (el mínimo) a cada repositorio de GitHub para hacerlo más vistoso. Es posible que en algún momento alguna persona / empresa entre a verlo y ayuda bastante tener un README.md personalizado que describa brevemente el ejercicio, o que el repositorio tenga una descripción, etc... Es recomendable hacerlo desde el principio porque luego raramente vuelven a editarse. Igualmente veo que ya vas personalizando tu GitHub, así que te animo a seguir.