Flexbox justify-content 即

Posted

技术标签:

【中文标题】Flexbox justify-content 即【英文标题】:Flexbox justify-content ie 【发布时间】:2017-05-24 17:47:04 【问题描述】:

我是第一次使用 flexbox,但遇到了 internet explorer 问题。

在 chrome 中看起来不错。但在 Internet Explorer 中,所有内容都向右对齐。我该如何解决这个问题?

我已经尝试添加默认的 heightmin-height 描述 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>

【问题讨论】:

我觉得这个教程对你有用...css-tricks.com/snippets/css/a-guide-to-flexbox 你认为我用错了flexbox吗? 【参考方案1】:

我通过删除 .column-small 上的 margin: auto 来修复它。

【讨论】:

以上是关于Flexbox justify-content 即的主要内容,如果未能解决你的问题,请参考以下文章

Flexbox justify-content:中心在 Safari 中无法正常工作

Flexbox justify-content 取决于子项的数量

Flexbox 自动边距不适用于 justify-content: center in IE

CSS Flexbox

IE Flexbox justify-content center 溢出问题

CSS flexbox居中[重复]