我们有一组使用宽度和 Flexbox 定义的列.使用固定宽度的原因是为了绕过关于 flex-basis and how IE 10-11 ignore calc() 的 IE Bug。 .由于我们使用的是 Flexbox,因此我们不想使用其他框架(如 Bootstrap)的 float: left
属性。可以用。
除了 Safari 9、10.1 和 11 之外,所有浏览器都运行良好。
我们如何解决对齐问题,以便我们让 Safari 的所有内容都排成两行四列?
.container {
max-width: 1440px;
padding: 0 16px;
margin: 0 auto;
}
.container:before, .container:after {
content: '';
display: table;
}
.container:after {
clear: both;
}
.flex__row {
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: row;
flex: 0 1 auto;
}
.flex__row--wrap{
flex-wrap: wrap;
}
.flex__col {
display: flex;
justify-content: center;
align-items: stretch;
}
@media screen and (min-width: 320px) {
.col--m-s-12 {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.col--t-s-6 {
width: 50%;
}
}
@media screen and (min-width: 1024px) {
.col--t-3 {
width: 25%;
}
}
[class*=col--] {
box-sizing: border-box;
padding: 2rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="flex__row flex__row--wrap">
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-cube fa-4x" aria-hidden="true"></i>
</div>
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-lock fa-4x" aria-hidden="true"></i>
</div>
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-bath fa-4x" aria-hidden="true"></i>
</div>
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-adjust fa-4x" aria-hidden="true"></i>
</div>
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-bars fa-4x" aria-hidden="true"></i>
</div>
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-arrows fa-4x" aria-hidden="true"></i>
</div>
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-bus fa-4x" aria-hidden="true"></i>
</div>
<div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
<i class="fa fa-archive fa-4x" aria-hidden="true"></i>
</div>
</div>
</div>
最佳答案
当我删除下面的 css 时,我能够解决问题。
.container:before, .container:after {
content: '';
display: table;
}
.container:after {
clear: both;
}
关于html - 如何在 Safari 上使用 Flexbox 正确对齐列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49391931/