CODEWITHSUNDEEP
htmlcssflexbox
Papi
Papi

Reputation: 345

Flex does not wrap two divs in same line

I am trying to make a form where the first name and last name are on the same line/column. I've tried putting the main group into flex and then putting the group I want with flex-wrap but it doesn't seem to move. Am I missing something? I've tried a couple things that didn't work (like setting the wrapped children to flex 1 1. Didn't work.

Anyways here's the HTML

<form>
   <div class="sd-form-group"></div>
   <div className="sd-form-wrap">
      <div class="form-name form-first-name">
         <label>First Name</label>
         <br>
         <input type="text">
      </div>
      <div class="form-name form-last-name">
         <label>Last Name</label>
         <br>
         <input type="text">
      </div>
   </div>
   <div class="form-email">
      <label>Email</label>
      <br>
      <input type="text">
   </div>
   <div class="form-message">
      <label>Message</label>
      <br>
      <textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
   </div>
   <div class="form-checkbox">
      <input type="checkbox">
      <label>
        Communications box.
      </label>
   </div>
   <input type="submit" value="Submit">
</div>
</form>

CSS:

.sd-form-group{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}
.sd-form-wrap {
    flex-wrap: wrap;
}

Upvotes: 0

Views: 872

Answers (1)

cMarius
cMarius

Reputation: 1132

One issue is on line 3 <div className="sd-form-wrap"> try using class instead of className when not using jsx or similar.

Also make sure your .sd-form-wrap class has display: flex;

.sd-form-group{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}
.sd-form-wrap {
    display: flex;
}
<form>
   <div class="sd-form-group"></div>
   <div class="sd-form-wrap">
      <div class="form-name form-first-name">
         <label>First Name</label>
         <br>
         <input type="text">
      </div>
      <div class="form-name form-last-name">
         <label>Last Name</label>
         <br>
         <input type="text">
      </div>
   </div>
   <div class="form-email">
      <label>Email</label>
      <br>
      <input type="text">
   </div>
   <div class="form-message">
      <label>Message</label>
      <br>
      <textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
   </div>
   <div class="form-checkbox">
      <input type="checkbox">
      <label>
        Communications box.
      </label>
   </div>
   <input type="submit" value="Submit">
</div>
</form>

Upvotes: 1

Related Questions