Aligning elements w/ flexbox

HTML-CSS
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:

image
image1920×1040 217 KB

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="john.doe@gmail.com" 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

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

2 Likes