0

Lo que busco

Hola a todos, estoy comenzando con el desarrollo web y comencé a utilizar el display flex. Sin embargo, a pesar de los diferentes intentos que realicé, no consigo el poder separar el cuadro negro hacia la derecha y dejar el resto de elementos hacia la izquierda.

Todo lo estoy colocando dentro de un div llamado "Header" y solo el cuadro negro es lo que estoy buscando la forma de moverlo hacia la derecha, si me pudieran ayudar lo agradecería muchísimo.

.header{
    background-color:#F5F8DF ;
    display: flex;
    height: 60px;
    align-items: center;
    width: 100vw; 
}
.header__button{
    font-size: 15px;
    background-color: #F5F8DF;
    width: 10em;
    height: 60px;
    box-sizing: border-box;
    transform: skew(-15deg);
    border: 2px solid green;
    color: black;
    transition: .3s;
    text-align: center;
    line-height: 53px;
    z-index: 1;
      
    }
.header__button:hover{
    background-color: #198026;
    width: 11em;
    color:white;
    transition: .3s;
}
.prueba {
    width: 200px;
    height: 50px;
    background: #000;
}
<html>
<head>
  <link href="css/estilos.css" rel="stylesheet" type="text/css">
  </link>
</head>

<body style="background-color:#2A2929">
  <nav>
  <div class="header">
    <a href="index.html">
      <div class="logo">
        <div class="logoimg">
          <img src="img/chuekimg.png" width="60" height="60">
        </div>
        <div class="txtlogo">
          <img src="img/txt.png" width="140" height="70">
        </div>
      </div>
    </a>
    <div class="header__button">
      <span>DOTA 2 </span>
    </div>
    <div class="header__button">
      <span>CS:GO </span>
    </div>   
    <div class="prueba">   
    </div>
  </div>
  </nav> 
</body>
</html>

2 respuestas 2

0

Aplicando el estilo margin-left: auto en tu contenedor de clase prueba conseguirás el efecto que buscas (en el ejemplo no se ven las imágenes porque no están añadidas):

.header{
    background-color:#F5F8DF ;
    display: flex;
    height: 60px;
    align-items: center;
    width: 100vw; 
}
.header__button{
    font-size: 15px;
    background-color: #F5F8DF;
    width: 10em;
    height: 60px;
    box-sizing: border-box;
    transform: skew(-15deg);
    border: 2px solid green;
    color: black;
    transition: .3s;
    text-align: center;
    line-height: 53px;
    z-index: 1;
      
    }
.header__button:hover{
    background-color: #198026;
    width: 11em;
    color:white;
    transition: .3s;
}
.prueba {
    width: 200px;
    height: 50px;
    background: #000;
    margin-left: auto;
}
<html>
<head>
  <link href="css/estilos.css" rel="stylesheet" type="text/css">
  </link>
</head>

<body style="background-color:#2A2929">
  <nav>
  <div class="header">
    <a href="index.html">
      <div class="logo">
        <div class="logoimg">
          <img src="img/chuekimg.png" width="60" height="60">
        </div>
        <div class="txtlogo">
          <img src="img/txt.png" width="140" height="70">
        </div>
      </div>
    </a>
    <div class="header__button">
      <span>DOTA 2 </span>
    </div>
    <div class="header__button">
      <span>CS:GO </span>
    </div>   
    <div class="prueba">   
    </div>
  </div>
  </nav> 
</body>
</html>

Lo que consigues añadiendo esto es que los bloques previos a donde pones margin-left:auto queden alineados a la izquierda, y el contenedor donde se aplica este estilo, y los siguientes, alineados a la derecha.

Espero que te pueda servir

0

La manera en que Flex funciona, es que al declarar un DIV como display: flex, sus elementos hijos directos se convierten en FLEX. Por la manera en que tienes ordenado tu código, en realidad estás volviendo Flex es a tu primer link (<a></a>), a tus dos botones (Dota y CS GO) y al div con class="prueba" (el rectángulo negro).

Entendiendo esto, a pesar de que se puede, es más trabajoso ir justificando cada uno de los elementos con justify-self. La solución más rápida y sencilla sería envolver todos tus elementos que van a la izquierda dentro de un div y luego enviar el primer bloque a la izquierda y el segundo a la derecha usando en css justify-content: space-between, tu HTML quedaría de la siguiente manera:

<html>
<head>
  <link href="css/estilos.css" rel="stylesheet" type="text/css">
  </link>
</head>

<body style="background-color:#2A2929">
  <nav>
  <div class="header">
    <div>
      <a href="index.html">
        <div class="logo">
          <div class="logoimg">
            <img src="img/chuekimg.png" width="60" height="60">
          </div>
          <div class="txtlogo">
            <img src="img/txt.png" width="140" height="70">
          </div>
        </div>
      </a>
    </div>
    <div class="header__button">
      <span>DOTA 2 </span>
    </div>
    <div class="header__button">
      <span>CS:GO </span>
    </div>   
    <div class="prueba">   
    </div>
  </div>
  </nav> 
</body>
</html>

Y luego en tu css ve hasta .header y haz lo siguiente:

.header{
    background-color:#F5F8DF ;
    display: flex;
    height: 60px;
    align-items: center;
    width: 100vw;
    justify-content: space-between
}

Explicación:

Para que entiendas cómo funciona, básicamente lo que estás haciendo al encerrar tus elementos en ese nuevo div, es que ahora los elementos hijos directos de tu div "header" serían únicamente tu nuevo div y el div del rectángulo negro, por lo que al usar justify-content: space-between, estás separando tus elementos flex hacia las esquinas de la pantalla.

Espero que te haya servido, cualquier duda estoy atento.

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.