2017-01-10 5 views
0

私は初めてフレックスボックスと働いていますが、インターネットエクスプローラがあります。フレックスボックスjustify-content ie

クロムでよく見えます。しかし、インターネットエクスプローラでは、すべてが正しい方向に向いています。どうすればこの問題を解決できますか?

私はすでにデフォルトを追加しようとしました高さ分の高さhereを説明したが、任意のアイデア?

.column { 
 
    max-width: 1000px; 
 
    margin: auto; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 

 
.panel { 
 
    padding: 10px; 
 
    width: 100%; 
 
    background: #fff; 
 
    margin-bottom: 50px; 
 
    border: 1px solid #eaeaea; 
 
} 
 

 
.center { 
 
    display: -webkit-box; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    justify-content: center; 
 
} 
 

 
.column-small { 
 
    max-width: 350px; 
 
    margin: auto; 
 
} 
 

 
.brand { 
 
    display: -webkit-box; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    justify-content: center; 
 
    background: #f5f5f1; 
 
    color: #002e5b; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.form-group-item { 
 
    width: 100%; 
 
    border-radius: 4px; 
 
    border: 1px solid #f2f2f2; 
 
    font-size: 15px; 
 
    box-shadow: none; 
 
    outline: none; 
 
    line-height: 1.5em; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    height: 45px; 
 
    text-indent: 5px; 
 
} 
 

 
.btn-main { 
 
    border: none; 
 
    border-radius: 5px; 
 
    font-weight: 500; 
 
    font-size: 16px; 
 
    background: #002e5b; 
 
    color: #fff; 
 
    padding: 10px 45px; 
 
} 
 

 
.full-width { 
 
    width: 100%; 
 
}
<div class="column"> 
 
    <div class="row"> 
 
    <div class="panel center"> 
 
     <div class="column-small"> 
 
      <div class="brand"> 
 
       Login 
 
      </div> 
 
       
 
      <form> 
 
       <input name="email" class="form-group-item" autofocus="autofocus"     required="required" type="email" placeholder="Email"> 
 
       
 
       <input name="password" class="form-group-item" required="required"     type="password" placeholder="Wachtwoord"> 
 
       
 
       <button class="btn-main full-width" type="submit">Login</button> 
 
      </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

私はこのチュートリアルがあなたにとって有益だと思っています... https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

+0

私はフレックスボックスを間違って使っていると思いますか? – Jenssen

答えて

0

私はそれを修正は:(

を動作していません削除すると、.column-smallmargin: autoになります。

関連する問題