stackoom
  简体   繁体   中英

how to make flex items align column when too large

 原文  2021-11-17 08:44:44  5   2    html/ css

Question

I have a signup form which is quite large.

I want to make the form input split up in the middle and go next to each other when it is larger than the screen height using flex (if that is even the proper way to do that).

Thanks for any kind of help and input.

i need to add more text to post so ignore this

example:

+------------+ 
|    FORM    | 
| +--------+ | 
| |        | |    when it is too large to fit completely
| |        | |     v
| |        | |   +---------------------+
| |        | |   |         FORM        |
| +--------+ |   | +--------+--------+ |
| |        | |   | |        |        | |
| |        | |   | |        |        | |
| |        | |   | |        |        | |
| |        | |   | |        |        | |
| +--------+ |   | +--------+--------+ |
|   submit   |   |       submit        |
+------------+   +---------------------+

sorry for my confusing CSS 

 @font-face { font-family: 'eau'; src: url('../fonts/eau.woff2') format('woff2'), url('../fonts/eau.woff') format('woff'), url('../fonts/eau.ttf') format('truetype'); } * { margin: 0; padding: 0; box-sizing: border-box; --unfocused-color: rgb(238, 115, 38); --focused-color: #ee7326; --error-background: #ec6666; --error-color: white; } html, body { width: 100%; height: 100%; } body { background: #eaeaea; font-family: 'eau', sans-serif; position: relative; }.container { width: 25%; min-width: 350px; max-width: 50%; height: intrinsic; height: -webkit-fit-content; height: -moz-max-content; padding: 3em; border-radius: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; text-align: center; } form h1 { text-transform: uppercase; font-weight: 500; } a { text-decoration: none; color: rgb(66, 0, 219); font-size: 80%; }.flex-parent { display: flex; flex-direction: column; } input[type='email'], input[type='password'], input[type='text'] { background: none; display: block; margin: 25px auto 0 auto; padding: 14px 10px; width: 70%; min-width: 100px; text-align: center; border: 2px solid var(--unfocused-color); border-radius: 24px; outline: none; color: black; transition: 0.25s; } input[type='email']:focus, input[type='password']:focus, input[type='text']:focus { width: 90%; border: 2px solid var(--focused-color); } input[type='submit'] { background: none; display: block; margin: 25px auto 0 auto; padding: 14px 10px; width: 50%; min-width: 100px; text-align: center; border: 2px solid var(--unfocused-color); border-radius: 24px; outline: none; color: black; transition: 0.25s; } input[class="password-reset-button"] { /* it breaks if i dont use [class="password-reset-button"] */ width: 60%; min-width: 120px; padding: 0; margin-top: 10px; border: none; color: rgb(66, 0, 219); font-size: 80%; } p { margin: 24px auto; } form.submitenabled:hover { background-color: var(--unfocused-color); color: white; } form.submitdisabled { color: white; border: 2px solid #6d6d6d; background-color: #6d6d6d; }.error { text-align: center; font-size: 80%; display: block; margin: 30px auto 0px auto; padding: 8px 4px; width: 100%; height: 20%; background-color: var(--error-background); color: var(--error-color); border-radius: 24px; }.displayNone { display: none; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="../../styles/login-signup-style.css"> <title>registreren</title> </head> <body> <div class="container"> <form action="../../php/signup_handler.php" method="post" id="form"> <h1>Account registreren</h1> <a href="../login">Inloggen</a> <div class="flex-parent"> <div class="flex-item"> <input type="email" name="email" placeholder="Email" id="email" required> <input type="text" name="first_name" placeholder="Voornaam" id="first_name" required> <input type="text" name="tussenvoegsel" placeholder="Tussenvoegsels" id="tussenvoegsel" required> <input type="text" name="last_name" placeholder="Achternaam" id="last_name" required> </div> <div class="flex-item"> <input type="text" name="student_nr" placeholder="Student nummer" id="student_nr" required> <input type="text" name="class" placeholder="Klas" id="class" required> <input type="password" name="password" placeholder="Wachtwoord" id="pwd" required> <input type="password" name="confirmPassword" placeholder="Herhaal Wachtwoord" id="pwd2" required> </div> </div> <input type="submit" value="Maak account" class="submitenabled" id="submit"> </form> </div> <script src="../../javascript/signup.js"></script> </body> </html>

2 answers

solution1
 0  2021-11-17 09:52:42

Just use media query, doc .

This way it will switch to normal display flex, you could make the opposite way as well by adding column below a certain screen width.

@media screen and (min-width:800px){
  .flex-parent{
    flex-direction:row;
  }
}

DEMO

 @font-face { font-family: 'eau'; src: url('../fonts/eau.woff2') format('woff2'), url('../fonts/eau.woff') format('woff'), url('../fonts/eau.ttf') format('truetype'); } * { margin: 0; padding: 0; box-sizing: border-box; --unfocused-color: rgb(238, 115, 38); --focused-color: #ee7326; --error-background: #ec6666; --error-color: white; } html, body { width: 100%; height: 100%; } body { background: #eaeaea; font-family: 'eau', sans-serif; position: relative; }.container { width: 25%; min-width: 350px; max-width: 50%; height: intrinsic; height: -webkit-fit-content; height: -moz-max-content; padding: 3em; border-radius: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; text-align: center; } form h1 { text-transform: uppercase; font-weight: 500; } a { text-decoration: none; color: rgb(66, 0, 219); font-size: 80%; }.flex-parent { display: flex; flex-direction: column; } input[type='email'], input[type='password'], input[type='text'] { background: none; display: block; margin: 25px auto 0 auto; padding: 14px 10px; width: 70%; min-width: 100px; text-align: center; border: 2px solid var(--unfocused-color); border-radius: 24px; outline: none; color: black; transition: 0.25s; } input[type='email']:focus, input[type='password']:focus, input[type='text']:focus { width: 90%; border: 2px solid var(--focused-color); } input[type='submit'] { background: none; display: block; margin: 25px auto 0 auto; padding: 14px 10px; width: 50%; min-width: 100px; text-align: center; border: 2px solid var(--unfocused-color); border-radius: 24px; outline: none; color: black; transition: 0.25s; } input[class="password-reset-button"] { /* it breaks if i dont use [class="password-reset-button"] */ width: 60%; min-width: 120px; padding: 0; margin-top: 10px; border: none; color: rgb(66, 0, 219); font-size: 80%; } p { margin: 24px auto; } form.submitenabled:hover { background-color: var(--unfocused-color); color: white; } form.submitdisabled { color: white; border: 2px solid #6d6d6d; background-color: #6d6d6d; }.error { text-align: center; font-size: 80%; display: block; margin: 30px auto 0px auto; padding: 8px 4px; width: 100%; height: 20%; background-color: var(--error-background); color: var(--error-color); border-radius: 24px; }.displayNone { display: none; } @media screen and (min-width:800px){.flex-parent{ flex-direction:row; } }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="../../styles/login-signup-style.css"> <title>registreren</title> </head> <body> <div class="container"> <form action="../../php/signup_handler.php" method="post" id="form"> <h1>Account registreren</h1> <a href="../login">Inloggen</a> <div class="flex-parent"> <div class="flex-item"> <input type="email" name="email" placeholder="Email" id="email" required> <input type="text" name="first_name" placeholder="Voornaam" id="first_name" required> <input type="text" name="tussenvoegsel" placeholder="Tussenvoegsels" id="tussenvoegsel" required> <input type="text" name="last_name" placeholder="Achternaam" id="last_name" required> </div> <div class="flex-item"> <input type="text" name="student_nr" placeholder="Student nummer" id="student_nr" required> <input type="text" name="class" placeholder="Klas" id="class" required> <input type="password" name="password" placeholder="Wachtwoord" id="pwd" required> <input type="password" name="confirmPassword" placeholder="Herhaal Wachtwoord" id="pwd2" required> </div> </div> <input type="submit" value="Maak account" class="submitenabled" id="submit"> </form> </div> <script src="../../javascript/signup.js"></script> </body> </html>

solution2
 0  2021-11-17 09:59:13

I made some adjustment in your css (in.container and body). Also added a media query to achieve the look you've described. The break is at 600px, but it can be adjusted. 

 @font-face { font-family: 'eau'; src: url('../fonts/eau.woff2') format('woff2'), url('../fonts/eau.woff') format('woff'), url('../fonts/eau.ttf') format('truetype'); } * { margin: 0; padding: 0; box-sizing: border-box; --unfocused-color: rgb(238, 115, 38); --focused-color: #ee7326; --error-background: #ec6666; --error-color: white; } html, body { width: 100%; height: 100%; } body { background: #eaeaea; font-family: 'eau', sans-serif; position: relative; height: 100vh; }.container { width: 25%; width: 500px; padding: 3em; border-radius: 24px; position: absolute; top: 10px; left: calc(50% - 250px); background: white; text-align: center; } form h1 { text-transform: uppercase; font-weight: 500; } a { text-decoration: none; color: rgb(66, 0, 219); font-size: 80%; }.flex-parent { display: flex; flex-direction: row; } input[type='email'], input[type='password'], input[type='text'] { background: none; display: block; margin: 25px auto 0 auto; padding: 14px 10px; width: 70%; min-width: 100px; text-align: center; border: 2px solid var(--unfocused-color); border-radius: 24px; outline: none; color: black; transition: 0.25s; } input[type='email']:focus, input[type='password']:focus, input[type='text']:focus { width: 90%; border: 2px solid var(--focused-color); } input[type='submit'] { background: none; display: block; margin: 25px auto 0 auto; padding: 14px 10px; width: 50%; min-width: 100px; text-align: center; border: 2px solid var(--unfocused-color); border-radius: 24px; outline: none; color: black; transition: 0.25s; } input[class="password-reset-button"] { /* it breaks if i dont use [class="password-reset-button"] */ width: 60%; min-width: 120px; padding: 0; margin-top: 10px; border: none; color: rgb(66, 0, 219); font-size: 80%; } p { margin: 24px auto; } form.submitenabled:hover { background-color: var(--unfocused-color); color: white; } form.submitdisabled { color: white; border: 2px solid #6d6d6d; background-color: #6d6d6d; }.error { text-align: center; font-size: 80%; display: block; margin: 30px auto 0px auto; padding: 8px 4px; width: 100%; height: 20%; background-color: var(--error-background); color: var(--error-color); border-radius: 24px; }.displayNone { display: none; } @media only screen and (max-width: 600px) {.flex-parent { flex-direction: column; }.container { width: 350px; top: 10px; left: calc(50% - 175px); } }
 <body> <div class="container"> <form action="../../php/signup_handler.php" method="post" id="form"> <h1>Account registreren</h1> <a href="../login">Inloggen</a> <div class="flex-parent"> <div class="flex-item"> <input type="email" name="email" placeholder="Email" id="email" required> <input type="text" name="first_name" placeholder="Voornaam" id="first_name" required> <input type="text" name="tussenvoegsel" placeholder="Tussenvoegsels" id="tussenvoegsel" required> <input type="text" name="last_name" placeholder="Achternaam" id="last_name" required> </div> <div class="flex-item"> <input type="text" name="student_nr" placeholder="Student nummer" id="student_nr" required> <input type="text" name="class" placeholder="Klas" id="class" required> <input type="password" name="password" placeholder="Wachtwoord" id="pwd" required> <input type="password" name="confirmPassword" placeholder="Herhaal Wachtwoord" id="pwd2" required> </div> </div> <input type="submit" value="Maak account" class="submitenabled" id="submit"> </form> </div> <script src="../../javascript/signup.js"></script> </body>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Make ALL flex-items wrap (like flex-direction: column) when any one flex-item too wide for flex-container How to align flex items in react? Align 2 items side-by-side in a flex column how to centre align div horizontally when using flex direction column How to align the card in flex that too in center? How to vertically align 2 items in a flex box how to align flex items to represent a bar chart How to align flex items like a table? How to align the flex items in three different ways? how to make one part of a flex div not follow align-items center?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM