Aligning elements w/ flexbox

Aligning elements w/ flexbox


So i am working on the survey page -->

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%;"/>
      <label for="email">*Email:</label>
      <input type="text" id="email" placeholder="[email protected]" name="email" required>
      <label for="email">*Name:</label>
      <input type="text" id="name" placeholder="John Doe" name="name" required>
      <label for="age">*Age:</label>
      <input type="text" id="number" placeholder="24" name="number" required>

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?



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


I would like you to refer to this

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

Survey Form: Aligning Input Boxes

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.


As you can see in the example given -->

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 -->


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


Refer this

Survey form can't align label with css grid