Flex items are not centering with justify-content but centered with text-align?

Question

I don't understand Why justify-content:center not working?

I think it's a inputs width issue i already tried give width to input fields but still not working.

Here is my code:

    .container {
    width: 100vw;
    }
    .container form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    .container form input {
    width: 80%;
    }

<div class="container">
  <form action="" method="post" novalidate>
    <div>
      <label for="my_username">Username:</label>
      <input type="text" name="username" class="inputs" autofocus required id="my_username">
    </div>
    <div>
      <label for="my_email">Email:</label>
      <input type="email" name="email" maxlength="254" id="my_email">
    </div>
    <div>
      <label for="my_password1">Password1:</label>
      <input type="password" name="password1" class="inputs" required id="my_password1">
    </div>
    <div>
      <label for="my_password2">Confirm Password:</label>
      <input type="password" name="password2" class="inputs" required id="my_password2">
    </div>
  </form>
</div>

score 3 · Accepted Answer · answered Dec 07 '21 at 18:00

3

justify-content defines the alignment along the main axis (in your case column. So you are centering the content within its row.

It also works only for the direct decendents of the flex container (in this case the div elements that are direct children of the form. If you change justify-content to align-items (which works for the cross-axis) then this should center the div elements horizontally, and then you can add the css to align the label and input elements within those divs.

There's a really good guide available for the properties of flex-box and what they affect here.

.container {
  width: 100vw;
}
.container form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container form input {
  width: 80%;
}

answered Dec 07 '21 at 18:00

Tetarchus

350
2
12

Why the main axis is column in my case? How can we identify the main aixs? – Tariq Ahmed Dec 07 '21 at 18:09
@TariqAhmed - Due to `flex-direction: column;`. The default is `row`, but this is the direction that the flex children are layed out in. – Tetarchus Dec 07 '21 at 18:10
It means if ```flex-direction: row;``` then our main axis is horizontal? – Tariq Ahmed Dec 07 '21 at 18:19
1

That's right. From the linked article:`flex-direction` establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. – Tetarchus Dec 07 '21 at 18:24

score 0 · Answer 2 · edited Dec 07 '21 at 22:34

0

It can be solved if you use align-items instead of justify-content. It's because of justify-content works in main axis and align-items in cross-axis, perpendicular to the main axis.

.container form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

edited Dec 07 '21 at 22:34

Tetarchus

350
2
12

answered Dec 07 '21 at 18:05

Majid Sadr

911
7
18

Put the reason.. – Tariq Ahmed Dec 07 '21 at 18:06
@TariqAhmed edited. – Majid Sadr Dec 07 '21 at 18:14

Flex items are not centering with justify-content but centered with text-align?

2 Answers2