CSS Flex with right-aligned second column wrapping to the left instead of floating between for small windows
Question
I have three inputs. I want the top to be as wide as the content and the second two to fit between with the second column right aligned (its label left-aligned to its input box).
I've come up with this layout which works fine but I would like for the second column (Label 3) to align with the left side of the browser window if the content shrinks too much instead of floating in between.
This is what is looks like when fit to the window:
This is what is looks like when it wraps and floats in the middle (not what I want):
This is how I want it to look like when wrapping:
Can flex box and CSS do this?
body { font-family: monospace; line-height: 200%; max-width: 600px; }.align-right { margin-left: auto; }.flex-row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }.flex-column { display: flex; flex-direction: column; flex: 1; }
<;DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flex Shrink</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <div class="flex-row"> <div class="flex-column"> <label>Label 1</label> <input/> </div> </div> <div class="flex-row"> <div class="flex-column"> <span> <label>Label 2</label> <br /> <input/> </span> </div> <div class="flex-column"> <div class="align-right"> <label>Label 3</label> <br /> <input/> </div> </div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2021-03-14 03:35:22
So it's all down to your CSS. In the .flex-row class I added the justify-content: space-between; declaration to space out the elements
Therefore there's no need for the .margin-align-right class anymore.
Then i removed the flex-colum-1 class and added flex-colum from the elements that you want to be spaced out so they won't have equal space of their parents
and for the element that you want to fill the space, i added the .flex-column-1 class to it for it to take the maximum width
body { font-family: monospace; line-height: 200%; max-width: 600px; }.flex-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; }.flex-column { display: flex; flex-direction: column; }.flex-column-1 { flex: 1; }
<;DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flex Shrink</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <div class="flex-row"> <div class="flex-column flex-column-1"> <label>Label 1</label> <input/> </div> </div> <div class="flex-row"> <div class="flex-column"> <span> <label>Label 2</label> <br /> <input/> </span> </div> <div class="flex-column"> <span> <label>Label 3</label> <br /> <input/> </span> </div> </div> </body> </html>
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.