[英]CSS Flex with right-aligned second column wrapping to the left instead of floating between for small windows
我有三個輸入。 我希望頂部與內容一樣寬，而后兩個與第二列右對齊（其 label 與其輸入框左對齊）。
我想出了這個工作正常的布局，但我希望第二列（標簽 3）與瀏覽器 window 的左側對齊，如果內容縮小太多而不是在兩者之間浮動。
這是適合 window 時的樣子：
這是它在中間包裹和浮動時的樣子（不是我想要的）：
這就是我希望它在包裝時的樣子：
flex box 和 CSS 可以這樣做嗎？
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>
所以這完全取決於你的 CSS。 在.flex-row class 我添加了justify-content: space-between; 聲明以分隔元素
因此不再需要.margin-align-right class 。
然后我刪除了flex-colum-1 class 並從您想要間隔的元素中添加了flex-colum colum ，這樣它們的父級空間就不會相等
對於要填充空間的元素，我添加了.flex-column-1 class 以使其具有最大寬度
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>
Items flex item左對齊和右對齊，當瀏覽器window縮小時如何居中？
[英]Items flex item is left-aligned and right-aligned, how to center it when the browser window is resized down?
縮放和居中不同尺寸的圖像，在 CSS 中使用右對齊的文本
[英]Scaling and centering image of varying dimensions, with right-aligned text in CSS
有什么方法可以使用 flex 而不是 float 來將框保持在內容之間的左右？
[英]Is there any way we can use flex instead of float to keep the boxes right and left in between the content?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.