0

Tengo 2 hijos en un contenedor que usa flexbox, quiero hacer que ambos se coloquen a cada extremo (izquierda-derecha) de su contenedor, pero no logro hacerlo. El código que tengo es el siguiente:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Prueba de transformación</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <header>
        <div class="contenedor-Menu">
            <div class="contenedor-H1">
                <h1 class="logo">Título</h1>
            </div>
            <div class="redesSociales">
                <img src="img/fa.png" alt="">
                <img src="img/tw.png" alt="">
                <img src="img/in.png" alt="">
            </div>      
        </div>
        <div class="contenedor-Texto">
                <h4 class="mensajito">¡Hello! I'm Peter</h4>
                <span class="subtitulo">Nove to travel all around the world and design beautiful things</span>
            </div>
    </header>


</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    background-image: url("../img/img.jpg"); 
    height: 600px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.contenedor-Menu {
    max-width: 1000px;
    overflow: hidden;
    margin: auto;
    background-color: red
}
header .contenedor-Menu {
    display: flex;
    justify-content: space-around;

}
header .contenedor-Menu .contenedor-H1 {
    width: 50%;
    color: #fff;
    margin-top: 1em;
}
header .contenedor-Menu .redesSociales {
    width: 50%;
    margin-top: 1em;
}
header .contenedor-Menu .redesSociales img {
    width: 35px;
}
1
  • @BenjamínGuzmán tengo entendido que esas propiedades dejan de ser funcionales al utilizar flexbox.
    – user13764
    Commented el 23 jul. 2017 a las 17:49

2 respuestas 2

0

Eso sucede por que tu clase .redesSociales tenia definido width: 50% no lo necesitas definirlo ya que si tienes 2 elementos siempre usara el 50% ..cool he? :D

Otra cosa que hice fue eliminar margin-top: 1em; no es necesario ya que con flex-box se pueden centrar elementos con la propiedad align-items: center;, puedes incrementar el height en la clase contenedor-Menu y siempre se mantendra centrado .

Es mejor para el rendimiento de los navegadores buscar elementos como

.contenedor-H1 {}

en vez de

header .contenedor-Menu .contenedor-H1{}

Si quieres entender mejor las propiedades de flex-box te sugiero visitar este link, si te ha servido no olvidor marcar como solucionado

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    background-image: url("../img/img.jpg"); 
    height: 600px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.contenedor-Menu {
    max-width: 1000px;
    overflow: hidden;
    margin: auto;
    background-color: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contenedor-H1 {
    color: #fff;
}

.redesSociales > img {
    width: 35px;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Prueba de transformación</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <header>
        <div class="contenedor-Menu">
            <div class="contenedor-H1">
                <h1 class="logo">Título</h1>
            </div>
            <div class="redesSociales">
                <img src="img/fa.png" alt="">
                <img src="img/tw.png" alt="">
                <img src="img/in.png" alt="">
            </div>      
        </div>
        <div class="contenedor-Texto">
                <h4 class="mensajito">¡Hello! I'm Peter</h4>
                <span class="subtitulo">Nove to travel all around the world and design beautiful things</span>
            </div>
    </header>


</body>
</html>

1
  • Excelente amigo, ahora si funciona. La verdad no sabía que no era necesario definir los tamaños de los contenedores. Muchas gracias Marco!
    – user13764
    Commented el 23 jul. 2017 a las 18:33
0

Encontré una solución, pero no estoy seguro si es la más adecuada. La solución fue la siguiente:

Dado que las imágenes de redes sociales son elementos "inline", le coloqué a la clase:

header .contenedor-Menu .redesSociales {

La propiedad:

text-align: right;

Funciona correctamente, pero no estoy seguro si es una buena solución. ¿Alguien podría indicarme si la solución es adecuada o es una mala practica?

Tu Respuesta

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