时间戳

首页 > 解决方案 > flex-wrap: wrap 在移动 iOS 上不起作用

javascript - flex-wrap: wrap 在移动 iOS 上不起作用

问题描述

我有这个在我的笔记本电脑上运行良好，但在移动 iOS 上不行。

* {
  /* normalize */
  padding: 0;
  margin: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  background: 0 0;
  min-height: 0;
  user-select: none;
  box-sizing: border-box;
  position: relative;
}

#a {
  display: flex;
  max-width: 100vw;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100);
}

#b {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  padding: 50px;
}

#c {
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
  display: flex;
  list-style: none;
}

li {
  flex: 1;
  width: 100%;
  display: flex;
  padding: 10px;
  border: 3px solid red;
  flex-direction: column;
}
<div id="a">
  <div id="b">
    <ul id="c">
      <li>foo</li>
      <li>hello</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
    </ul>
  </div>
</div>

但是，在移动设备上它是几行，但大多数情况下它会向右溢出。就像它将有 2 或 3 行但然后每行 15 或 20 个项目（当只有 2 或 3 个适合屏幕时）。我无法让它工作，因为我没有一个好的系统可以在移动设备上进行调试。

标签： javascripthtmlcssmobilesafari

解决方案

更新 li 的样式。更改flex: 1;为 flex: 1 0 auto;和删除width: 100%

li {
  flex: 1 0 auto;
  /* width: 100%; */
  display: flex;
  padding: 10px;
  border: 3px solid red;
  flex-direction: column;
}


* {
  /* normalize */
  padding: 0;
  margin: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  background: 0 0;
  min-height: 0;
  user-select: none;
  box-sizing: border-box;
  position: relative;
}

#a {
  display: flex;
  max-width: 100vw;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100);
}

#b {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  padding: 50px;
}

#c {
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
  display: flex;
  list-style: none;
}

li {
  flex: 1 0 auto;
  /* width: 100%; */
  display: flex;
  padding: 10px;
  border: 3px solid red;
  flex-direction: column;
}
<div id="a">
  <div id="b">
    <ul id="c">
      <li>foo</li>
      <li>hello</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
      <li>world</li>
      <li>bar</li>
      <li>food</li>
      <li>hi</li>
      <li>morning</li>
      <li>something</li>
      <li>beverage</li>
      <li>snack</li>
      <li>drink</li>
      <li>other</li>
    </ul>
  </div>
</div>

查看更新的小提琴

我在 iphone 6、IOS 10.3 中测试过

推荐阅读