To put elements to ends with Flexbox?

Navigation
0

I have 2 children in a container that uses flexbox, I want to have them both placed at each end (left-right) of their container, but I can not do it. The code that I have is the following:

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;
}
    
asked by Pedro Fumero 23.07.2017 в 19:30
source

2 answers

1

That happens because your class .redesSociales was defined width: 50% you do not need to define it because if you have 2 elements always use 50% ..cool he? : D

Another thing I did was eliminate margin-top: 1em; is not necessary since with flex-box you can center elements with property align-items: center; , you can increase the height in class contenedor-Menu and always stay centered.

It's better for browser performance to search for items like

.contenedor-H1 {}

instead of

header .contenedor-Menu .contenedor-H1{}

If you want to better understand the properties of flex-box I suggest you visit this link , if it has served you do not click as solved 

* {
    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>
    
answered by 23.07.2017 / 20:24
source
0

I found a solution, but I'm not sure if it's the right one. The solution was the following:

Since the images of social networks are "inline" elements, I placed the class: 

header .contenedor-Menu .redesSociales {

The property: 

text-align: right;

It works correctly, but I'm not sure if it's a good solution. Can someone tell me if the solution is right or is it a bad practice?

    
answered by 23.07.2017 в 19:48
console.log does not appear with pm2 Change state a select to disabled