html - Flex-wrap iOS Safari 和 Chrome
问题描述
Flex wrap 在 Safari 和 Chrome 上不起作用——这似乎有据可查,但我读过的修复程序都没有在我的情况下工作。
在 iOS Safari 和 Chrome 上,这些行根本不会换行,并且会超出容器。我试过通过 Autoprefixer 运行它,但仍然没有乐趣。
这是一个简化的测试用例:https ://codepen.io/jciw/pen/yxPebP
* {
box-sizing: border-box;
}
body {
background-color: #ccc;
}
.container {
width: 1000px;
margin: 0 auto;
background-color: white;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -25px;
margin-right: -25px;
}
.column-one-third {
width: 33.333%;
padding-left: 25px;
padding-right: 25px;
}
<div class="container">
<div class="row">
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
<div class="column-one-third">
<h1>Hello</h1>
</div>
</div>
</div>
解决方案
推荐阅读
- r - 从同级多个同名节点抓取网页
- android - React Native Azure Auth 注销而不重定向到网页
- sql - 如何根据特定字段更新具有数字总和的表?
- javascript - 使用 jest-puppeteer 对文本字段进行 Webscrape 测试
- swift - 带有表情符号的推送通知(Firebase + iOS)
- json - 如何解决jsonb中的递归嵌套树?
- c# - Visual Studio 说我的变量在私有方法中没用
- tensorflow - 使用 TensorFlow 2 和 Keras 通过网络将多组输入传递到不同的损失函数中
- javascript - 输入框内的值没有改变
- java - 支持多达 ZonedDateTime 的多种格式作为请求参数;如果缺少,请设置默认时间和区域