Keeping your html intact, A little modification was needed where you gave display:flex, basically the display:flex works for immediate children only and not the the sub-children so immediate child of .survey-questions was <form> and <div> are children to <form> hence I added form to your existing selector and gave an additional attribute flex-wrap:wrap to maintain rows and columns layout as you had expected.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* just a little modification in this part */
.survery-questions form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
form > div{
width: 33.3%;
}
.home-price-footer {
width: 25%;
height: 45px;
margin-bottom: 3em;
}
#input {
background: #ffffff;
border: 1px solid #eaeaea;
}
<html>
<head>
</head>
<body>
<div class="survery-questions">
<form action="">
<div class="price-form">
<input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
</div>
</form>
</div>
</body>
</html>
The <form> element is the only child of your flex container, and is therefore the only element being influenced by it. By moving it outside the flex container things come closer to behaving as you’d like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.survey-questions {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* added */
}
.survey-questions > div {
width: 33.33%; /* added */
padding: 0 10px; /* added */
}
.home-price-footer {
width: 100%; /* updated */
height: 45px;
margin-bottom: 3em;
}
#input {
background: #ffffff;
border: 1px solid #eaeaea;
}
<form action="">
<div class="survey-questions">
<div class="price-form">
<input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
</div>
</div>
</form>
I want to create 9 input fields for a product calculator that I’m building. I want to have 3 rows of three columns. However, for some reason when I apply display: flex and flex-direction: row to the parent div this doesn’t work. All my input fields are placed in a column regardless of flex-direction and input sizing doesn’t work
What am I doing wrong?
Thanks.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.survery-questions {
display: flex;
flex-direction: row;
}
.home-price-footer {
width: 25%;
height: 45px;
margin-bottom: 3em;
}
#input {
background: #ffffff;
border: 1px solid #eaeaea;
}
<html>
<head>
</head>
<body>
<div class="survery-questions">
<form action="">
<div class="price-form">
<input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
</div>
</form>
</div>
</form>
</div>
</body>
</html>
This certainly works, but for several reasons I’ve avoided using forms as layout elements. For one thing behavior can be unpredictable vs. a div–sometimes they don’t take styling the same way. For another, if you decide to restructure the form (say to split it into two) you now have to modify your layout as well.
