I've been attempting to configure a flexbox layout with multiple input fields, but I'm having trouble achieving the desired look. Here is the code snippet that I've been working with:
.inputSettings {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 750px;
}
.inputSettings > form {
background: red;
border: 1px solid yellow;
flex: 1;
}
.inputSettings > form > input {
width: 165px;
height: 30px;
border-radius: 5px;
}<div class="inputSettings">
<form>
<label>First Name</label>
<input type="text" id="fname" name="fname">
</form>
<form>
<label>First Name</label>
<input type="text" id="fname" name="fname">
</form>
<form>
<label>First Name</label>
<input type="text" id="fname" name="fname">
</form>
<form>
<label>First Name</label>
<input type="text" id="fname" name="fname">
</form>
<form>
<label>First Name</label>
<input type="text" id="fname" name="fname">
</form>
<form>
<label>First Name</label>
<input type="text" id="fname" name="fname">
</form>
</div>JSfiddle: https://jsfiddle.net/rz94hwbv/2/
I am aiming to evenly space the input fields inside the flexbox so that the leftmost input field's border aligns with the left border of the box, and the rightmost input field's border aligns with the rightmost border. Currently, there is some padding to the right of each input field. I've tried various approaches without success. Any assistance or suggestions would be greatly appreciated.