我一直无法确定为什么flexbox在IE 11中不起作用.
为了测试,我从CodePen中获取了一个非常简单的flexbox布局,并粘贴了以下信息.
Chrome按预期工作; IE11失败了.
在Chrome上运行的布局成功图像:
IE11上布局失败的图像
body {
background: #333;
font-family: helvetica;
font-weight: bold;
font-size: 1.7rem;
}
ul {
list-style: none;
}
li {
background: hotpink;
height: 200px;
text-align: center;
border: 2px solid seashell;
color: seashell;
margin: 10px;
flex: auto;
min-width: 120px;
max-width: 180px;
}
.flex {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}Run Code Online (Sandbox Code Playgroud)
<ul class="flex">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>Run Code Online (Sandbox Code Playgroud)