In the following snippet, where I am making response form, where labels are above on mobile, and to left with desktop. The elements with a .field
class have justify-content: stretch
, which should make the items expand to fit the available space.
However I find that the <input>
elements do not expand. I have to add flex-grow: 1
to it in order to make it expand to fill the available width.
This shows I don't understand what stretch
is doing. Why is the flex-grow
required.
justify-content: stretch; /* Distribute items evenly Stretch 'auto'-sized items to fit the container */
And you can see below the .input
elements have width: auto
.
UPDATE: I added the div.not-needed
elements below to show a flew child can be a flex parent to and it does not make the difference. This way I separated the two layers of flex parents.
Later on in the MDN link it says:
Note: stretch is not supported by flexible boxes (flexbox).
So the stretch
value is only valid for grid
for now I think, and not flexbox.
.container {
display: flex;
align-items: stretch;
flex-direction: column;
}
.label {
width: 100px;
}
.input {
width: auto;
flex-grow: 1;
}
.field {
display: flex;
justify-content: stretch;
flex-wrap: wrap;
}
<div >
<div >
<div >
<label for="ID_FIELD_1" >Label 1</label>
<input id="ID_FIELD_1" type="text" name="field_1" value="Value 1">
</div>
</div>
<div >
<div >
<label for="ID_FIELD_2" >Label 2</label>
<input id="ID_FIELD_2" type="text" name="field_2" value="Value 2">
</div>
</div>
<div >
<div >
<label for="ID_FIELD_3" >Label 3</label>
<input id="ID_FIELD_3" type="text" name="field_3" value="Value 3">
</div>
</div>
</div>
CodePudding user response:
The justify-content
property has to be applied to flex containers and not to it's items.
Even then it just defines how the space between and around content items is distributed (see CSS justify-content).
For filling the available space, the item element (your input
) has to grow (e.g. flex-grow: 1
) or it's width to be set (e.g. width: 100%
).