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
    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
    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 that you have read and understand our privacy policy and code of conduct.