5

Me gustaria usar display: flex para poner un justify-content.

Pero de 4 elementos hijos que tengo hay uno que me gustaria omitir y tenerlo en otra linea.

Como veis en el codigo, me gustaria aplicar justify-content: space-around; solo a los íconos de redes sociales y no al párrafo con el copyright.

<footer>
    <img src="../img/twitter.png">
    <img src="../img/instagram.png">
    <img src="../img/youtube.png">
    <p>© 2020 Dell</p>
</footer>
 footer {
    height: 100px;
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
}
2
  • Lo que no entiendo es la diferencia entre el título y el contenido: «Cómo evitar display:flex» y «Me gustaría usar display:flex» ¿Finalmente la idea es utilizarlo o no?
    – Shaz
    Commented el 2 abr. 2020 a las 17:19
  • @Shaz la idea es usarlo pero que un elemento en concreo ignore esa regla
    – user165893
    Commented el 2 abr. 2020 a las 17:31

3 respuestas 3

4

EDICIÓN

Dado que necesitas que el display solo afecte a las imágenes pero no asi al párrafo entonces lo mas conveniente parece ser:

  • Envuelve los 3 elementos img dentro de un section
  • Aplicale el display flex al contenedor section en vez del footer como tal
  • Mediante clases identifica a todos los elementos a modificar

Aclaraciones:

Solo coloqué medidas en pixeles al elemento img para hacerlo mas notorio en la maquetación, pero este detalle dependerá enteramente del recurso multimedia que tu ingreses y de la medida que la maquetación real que hagas le otorgue.

EJEMPLO

    <style>
      .pie-pagina__contenedor-social{
        display: flex;
        justify-content: space-around;
      } 
      .pie-pagina__elemento {
        height: 120px;
        border: 1px solid;
        width: 100px;
      }
      .pie-pagina__elemento-parrafo {
        background-color: red;
      }
    </style>
    
    <footer class="pie-pagina">
        <section class="pie-pagina__contenedor-social">
          <img class="pie-pagina__elemento" src="../img/twitter.png">
          <img class="pie-pagina__elemento" src="../img/instagram.png">
          <img class="pie-pagina__elemento" src="../img/youtube.png">
        </section>
          <p class="pie-pagina__elemento-parrafo">© 2020 Dell</p>
    </footer>

Visualmente esto será el resultado

introducir la descripción de la imagen aquí

2
  • Pero de esa forma no se aplica el justify-content al footer si no a cada imagen si no me equivoco no? y de esa forma se me quedan los iconos de forma vertical gyazo.com/e8b81339851be94d046583c26b783229
    – user165893
    Commented el 2 abr. 2020 a las 17:50
  • 1
    @Jorge.montejo checa la actualización parece ser que esto es lo que buscas comentame
    – user128299
    Commented el 2 abr. 2020 a las 18:30
1

Puedes hacerlo de esta forma: Agregando clases a las img y en el css aplicarle el estilo con footer.imagen

    <footer>
        <img class="imagen" src="../img/twitter.png">
        <img class="imagen" src="../img/instagram.png">
        <img class="imagen" src="../img/youtube.png">
        <p>© 2020 Dell</p>
    </footer>
    <style>
     footer.imagen{
        height: 100px;
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
    }
    </style>

Referencias:

Selectores de clase

0

Deberías envolver los elementos a los que les quieres aplicar el justify-content en un section o un div para así aplicarle el css a los hijos dentro de ese mismo contenedor. Así el CSS solo se aplicará a esos elementos, y no a los que se encuentren fuera.

0

Tu Respuesta

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