Flexbox justify-content 即
Posted
技术标签:
【中文标题】Flexbox justify-content 即【英文标题】:Flexbox justify-content ie 【发布时间】:2017-05-24 17:47:04 【问题描述】:我是第一次使用 flexbox,但遇到了 internet explorer 问题。
在 chrome 中看起来不错。但在 Internet Explorer 中,所有内容都向右对齐。我该如何解决这个问题?
我已经尝试添加默认的 height 和 min-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