Place the elements using flex

Question

Place the elements using flex

Navigation

#1 by (1 votes)

1

I want to place the following registration form with this aspect.

For this I was going to do it with display: flex; As I understand it serves to describe how to order the containers . Therefore I have made a general container, "container-register" and then 3 containers to get the shape I want.

I understand that the main container, I must define it with a row type address, flex-direction:column; and automatically everything should be put in column, the form containing the inputs as flex-direction:row; and then the two containing the fields text a flex-direction:column; .

Why is not the form lined up?

Code

/* ++++++++++ CONTENEDORES DE REGISTRO Y LOGIN ++++++++++++ */

#contenedor-btn-registro-login {
  background-color: #f4a9c7;
  display: flex;
  justify-content: center;
}

#contenedor-btn-registro-login a {
  background-color: #fff78c;
  padding: 7px;
  font-family: sans-serif;
  text-decoration: none;
  color: #000;
  border-radius: 10px;
  margin: 0 30px;
}

.contenedor-registro-login {
  background-color: #f4a9c7;
  display: flex;
  justify-content: center;
}

.contenedor-registro-login h2 {
  font-family: sans-serif;
  text-align: center;
}

.contenedor-registro-login input {
  height: 20px;
  width: 200px;
  margin: 5px;
  padding: 5px;
  border: none;
  border-radius: 10px;
}

.contenedor-registro-login p {
  font-family: sans-serif;
  text-align: center;
}


/* ++++++++++ FORMULARIO REGISTRO ++++++++++++ */
#contenedor-registro{
  display: flex;
  flex-direction:column;
}

#form-registro {
  display: flex;
  flex-direction: row;
}

.registrotext {
  width: 250px;
  display: flex;
  flex-direction: column;
}

<div class="contenedor contenedor-registro-login" id="contenedor-registro">

  <h2>PAG REGISTRO</h2>

  <div id="form-registro">
    <form action="PHP/LogIn/validarRegistro.php" method="post">

      <div class="registrotext">
        <input type="text" name="txtNombre" id="nombre" required autofocus placeholder="Nombre">
        <input type="text" name="txtUsuario" id="Usuario" required placeholder="Usuario">
      </div>

      <div class="registrotext">
        <input type="email" name="txtEmail" id="email" required placeholder="email">
        <input type="password" name="txtClave" required placeholder="Contraseña">
      </div>
      <div id="registro-submit">
        <input type="submit" id="btn" value="Registrar">
      </div>
    </form>
  </div>

  <p>Cuidado porque es Case Sensitive</p>

</div>

css3 css flexbox

asked by NEA 13.09.2018 в 14:22

source

1 answer

Error saving file in different path to the root project C # Display user tables using sqlcmd

score 1 · Accepted Answer

The div #form-registro has a single element in it: form . So you have to make the form a flex container: #form-registro form{ instead of #form-registro{

/* ++++++++++ CONTENEDORES DE REGISTRO Y LOGIN ++++++++++++ */


.contenedor-registro-login {
  background-color: #f4a9c7;

}

.contenedor-registro-login h2 {
  font-family: sans-serif;
  text-align: center;
}

.contenedor-registro-login input, #btn {
  height: 20px;
  width: 200px;
  margin: 5px;
  padding: 5px;
  border: none;
  border-radius: 10px;
}

.contenedor-registro-login p {
  font-family: sans-serif;
  text-align: center;
}


/* ++++++++++ FORMULARIO REGISTRO ++++++++++++ */
#contenedor-registro{
  display: flex;
  flex-direction:column;
}

#form-registro form {
  display: flex;
  flex-direction: row;
}

.registrotext {
  width: 250px;
  display: flex;
  flex-direction: column;
}


#registro-submit{
  display:flex;
  flex-direction: column;
  justify-content:center;
}

<div class="contenedor contenedor-registro-login" id="contenedor-registro">

  <h2>PAG REGISTRO</h2>

  <div id="form-registro">
    <form action="PHP/LogIn/validarRegistro.php" method="post">

      <div class="registrotext">
        <input type="text" name="txtNombre" id="nombre" required autofocus placeholder="Nombre">
        <input type="text" name="txtUsuario" id="Usuario" required placeholder="Usuario">
      </div>

      <div class="registrotext">
        <input type="email" name="txtEmail" id="email" required placeholder="email" autocomplete="off">
        <input type="password" name="txtClave" required placeholder="Contraseña">
      </div>
      <div id="registro-submit">
        <input type="submit" id="btn" value="Registrar">
      </div>
    </form>
  </div>

  <p>Cuidado porque es Case Sensitive</p>

</div>

I hope it's useful