Display Flex property does not work on Firefox

Asked

Viewed 255 times

1

I am developing a website and using a lot of display: flex. The problem is that I went to open the site in the Firefox browser and realized that it does not apply this property. I even looked in some articles about how
https://stackoverflow.com/questions/37306138/flexbox-not-working-properly-on-firefox-but-okay-on-chrome-safari

But this solution did not solve, it follows my code:

.body {
	width: 100%;
	background: url('../images/biblia-sagrada3.jpg') no-repeat fixed center;
	opacity: 0.9;
	background-size: 100%;
	display:flex;
    display: -webkit-box-flex;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box-flex;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	justify-content: center;
	align-items: center;
}
.container-login {
	background-color: #95afba;
	height: auto;
	width: 300px;
	padding: 15px;
	border-radius: 5px;
}
<body class="body">
    <div class="header fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                        <a href="index.html"><h1 class="site-title">RelatorioCCB.com</h1></a>
                </div>
                <div class="col-md-8">
                    <ul class="nav justify-content-end">
                        <li class="nav-item">
                            <a href="login.html" class="nav-link">Logar</a>
                            </li>
                            <li class="nav-item">
                            <a href="#" class="nav-link">Registrar-se</a>
                            </li>
                        <li class="nav-item">
                            <a href="" class="nav-link">Sobre</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container-login">

        <div class="login-title">
            <h4 class="login-title-h4">
                Insira aqui os dados
            </h4>
        </div>
        <div class="form-group">
            <form action="#" method="POST">
                <!--<label for="name_login" class="">Login ou E-mail</label>-->
                <input type="text" class="form-control" name="name_login" placeholder="Login ou E-mail"><br/><br/>

                <!--<label for="name_pass">Senha</label>-->
                <input type="password" class="form-control" name="name_pass" placeholder="Senha"><br/><br/>

                <button class="btn btn-person btn-clear btn-block" type="submit">Limpar</button>
                <button class="btn btn-person btn-login btn-block">Login</button>
            </form>
        </div>

    </div>

</body>

From now on I’d appreciate it if someone could guide me;

html css css3 firefox

1 answer

1


Friend by the classes you used justify-content: center; and align-items: center; it seems to me that you’re trying to align the form in the center of the page. But this will only happen if the page has a set height... After all like the father of your form which is the body, who doesn’t have a height, just like the HTML who also does not have a height you do not have a reference of height in the document to make the vertical alignment work...

So just put a 100% height to the HTML and the body that your code is working.

inserir a descrição da imagem aqui

See the image code above.

html,
body {
    height: 100%;
}
.body {
	width: 100%;
	background: url('https://placecage.com/100/100') no-repeat fixed center;
	opacity: 0.9;
	background-size: 100%;
	display:flex;
    display: -webkit-box-flex;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box-flex;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	justify-content: center;
	align-items: center;
}
.container-login {
	background-color: #95afba;
	height: auto;
	width: 300px;
	padding: 15px;
	border-radius: 5px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />


<body class="body">
  <div class="header fixed-top">
      <div class="container">
          <div class="row">
              <div class="col-md-4">
                      <a href="index.html"><h1 class="site-title">RelatorioCCB.com</h1></a>
              </div>
              <div class="col-md-8">
                  <ul class="nav justify-content-end">
                      <li class="nav-item">
                          <a href="login.html" class="nav-link">Logar</a>
                          </li>
                          <li class="nav-item">
                          <a href="#" class="nav-link">Registrar-se</a>
                          </li>
                      <li class="nav-item">
                          <a href="" class="nav-link">Sobre</a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </div>

  <div class="container-login">

      <div class="login-title">
          <h4 class="login-title-h4">
              Insira aqui os dados
          </h4>
      </div>
      <div class="form-group">
          <form action="#" method="POST">
              <!--<label for="name_login" class="">Login ou E-mail</label>-->
              <input type="text" class="form-control" name="name_login" placeholder="Login ou E-mail"><br/><br/>

              <!--<label for="name_pass">Senha</label>-->
              <input type="password" class="form-control" name="name_pass" placeholder="Senha"><br/><br/>

              <button class="btn btn-person btn-clear btn-block" type="submit">Limpar</button>
              <button class="btn btn-person btn-login btn-block">Login</button>
          </form>
      </div>

  </div>

  • Thank you very much. Solved my problem :)

  • @Claitonbarreto legal, I’m glad you solved

Browser other questions tagged html css css3 firefox

You are not signed in. Login or sign up in order to post.