CSS Flex with right-aligned second column wrapping to the left instead of floating between for small windows

user_1762276 0
Viewed 40

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:

enter image description here

This is what is looks like when it wraps and floats in the middle (not what I want):

enter image description here

This is how I want it to look like when wrapping:

enter image description here

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>

flexbox css html javascript
1 Answers

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>

user_153501390
Related