2
       <style>

            .container {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            .container .court {
                width: 50%;
                float: right;
            }
            
            .container .inputs {
                width: 30%;
            }

    </style>
</head>
<body>
<h1>Controle su eficiencia de tiro</h1>
<div class="container">

    <div class="court">
        <img src="./assets/basketballhalfcourtlines_512x.webp" alt="Cancha de basket" >
    </div>

    <div class="inputs">
        <form>
            <input id="freeThrow" type="number"><label for="freeThrow"> -- %</label><br>
            <input id="leftCorner" type="number"><label for="leftCorner"> -- %</label><br>
            <input id="leftWing" type="number"><label for="leftWing"> -- %</label><br>
            <input id="center" type="number"><label for="center"> -- %</label><br>
            <input id="rightWing" type="number"><label for="rightWing"> -- %</label><br>
            <input id="rightCorner" type="number"><label for="rightCorner"> -- %</label><br>
        </form>
    </div>
    
</div>
    
</body>

Buenas gente, estoy teniendo un problema con flexbox y no logro solucionarlo. Estoy intentando alinear horizentalmente mis dos div ( .court y .inputs ), lo hago como usualmente y no entiendo porque no obtengo resultado.

Mi intencion es dejar el titulo centrado y los 2 divs alineados uno al lado del otro, dandole prioridad de espacio a la imagen que al form

1 respuesta 1

1

Lo lograrías usando la regla @media, en donde digo que si superamos el ancho de 800px, ocurrirán las propiedades de adentro (por el max-width):

@media (max-width: 800px) {
  h1 {
    text-align: center;
  }
  
  .container {
    flex-direction: column;
    gap: 20px;
  }
  
  .container .court,
  .container .inputs {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

Explicación:

Primero, centro el título (que es el h1). Luego, a tu container le indico que sus elementos de adentro (la imagen y los inputs) estén direccionadas horizontalmente (en columnas) con flex-direction: column; y que tendrán una separación de 20px. Y por último, a ambos elementos les indico que ocuparán todo el ancho de la pantalla (100%), serán flexibles y se justificarán al centro para obtener un mejor resultado.


Código:

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.container .court {
  width: 50%;
  float: right;
}

.container .inputs {
  width: 30%;
}

@media (max-width: 800px) {
  h1 {
    text-align: center;
  }
  
  .container {
    flex-direction: column;
    gap: 20px;
  }
  
  .container .court,
  .container .inputs {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
<h1>Controle su eficiencia de tiro</h1>
<div class="container">
  <div class="court">
    <img src="https://i.imgur.com/wBWzOZo.png" width="250px" alt="Cancha de basket" >
  </div>
  <div class="inputs">
    <form>
      <input id="freeThrow" type="number"><label for="freeThrow"> -- %</label><br>
      <input id="leftCorner" type="number"><label for="leftCorner"> -- %</label><br>
      <input id="leftWing" type="number"><label for="leftWing"> -- %</label><br>
      <input id="center" type="number"><label for="center"> -- %</label><br>
      <input id="rightWing" type="number"><label for="rightWing"> -- %</label><br>
      <input id="rightCorner" type="number"><label for="rightCorner"> -- %</label><br>
    </form>
  </div>
</div>

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.

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