Aligning elements w/ flexbox

Aligning elements w/ flexbox
0

#1

So i am working on the survey page --> https://codepen.io/Mike-was-here123/pen/LBervq?editors=1100

I am wondering how i can align the form elements:

Is there a any tricks, especially with flexbox to make all of those elements aligned? My code for this so far is:

Line 18 HTML:

 <form id="survey-form">
      <p id="description">What is the camper experince?</p>
      <hr style="width: 80%; margin-top: -1%;"/>
      <div>
      <label for="email">*Email:</label>
      <input type="text" id="email" placeholder="[email protected]" name="email" required>
      </div>
      <div>
      <label for="email">*Name:</label>
      <input type="text" id="name" placeholder="John Doe" name="name" required>
      </div>
      <div>
      <label for="age">*Age:</label>
      <input type="text" id="number" placeholder="24" name="number" required>
      </div>
      
    </form>

Line 18 CSS:

#survey-form {
 background-color: rgb(242, 247, 244);
  flex-direction: column;
}
#email, #name, #number {
  text-align: center;
  font-size: 18px;
  width: 250px;
}
[for] {
  font-size: 23px;
}

Line 87 CSS also:

  #email, #name, #age {
  text-align: center;
  font-size: 13px;
  width: 200px;
}
[for] {
  font-size: 18px;
}
}

How could i nicely align things like in the example given? https://codepen.io/freeCodeCamp/full/VPaoNP


#2

#3

Which one do you recommend to help me align these items? They are not all the same width, so what should i do?


#4

I would like you to refer to this

You can add flexbox properties for the .outer element, if needed


Survey Form: Aligning Input Boxes
#5

align-items: perhaps? I don’t think this will align it like you’d like.

To be honest, in order to match what I saw on the example, I just used a grid system and justified each cell accordingly with a left-justify/right-justify class.


#6

As you can see in the example given --> https://codepen.io/freeCodeCamp/full/VPaoNP

all the boxes are perfectly aligned, not just centered (age, email, name)

I know how to align stuff with flex box, just wonder how i could go about doing this with my pen --> https://codepen.io/Mike-was-here123/pen/LBervq?editors=1100


#7

If you want to use flex box. I think you’d have to use two separate divs and justify within those divs. That’s what I did with a grid display


#8

Refer this


Survey form can't align label with css grid