flex-wrap在internet explorer中不起作用
我有4个盒子，它是一个标准的2列2行盒子。不幸的是我必须提供ie支持。在internet explorer中，flex wrap不起作用，所以所有的框都在一排，看起来很乱。有没有一种可以替代柔性包装的方法呢？代码非常基本，在所有浏览器中都能工作，但在IE中不行。
display: flex;
flex-wrap: wrap;
justify-content: center;
共有1个答案
null
main { background: #E15555; }
.wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 700px;
margin: 0 auto;
min-height: 100vh;
}
.box { padding: 20px; }
.content {
width: 100px;
height: 100px;
background: #FEC8EE;
}<body>
<main>
<div class="wrap">
<div class="box">
<div class="content"></div>
</div>
<div class="box">
<h1>Hola Amigo</h1>
</div>
</div>
</main>
</body>-
通常，如果容器的空间不足，其余的弹性项目将被隐藏，如下所示。 flex-wrap属性用于指定flex-container是单行还是多行的控件。 usage - flex-wrap: nowrap | wrap | wrap-reverse flex-direction: column | column-reverse 此属性接受以下值 - wrap - 如果空间不足，容器的元素（flexitem
-
flex-wrap 主要通过在外层容器中设置它里面的子项目是否可以换行。默认情况下项目是不换行的。 1. 官方定义 flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。 2. 慕课解释 默认情况下，设置了 display:flex 的容器是不会换行的，这时候如果我们希望它换行就可以通过 flex-wrap设置超出宽度换行，也可以设置它如何换行，既换行之后的排
-
本文向大家介绍Bootstrap 4 .flex-wrap类，包括了Bootstrap 4 .flex-wrap类的使用技巧和注意事项，需要的朋友参考一下 在Bootstrap 4中使用flex-wrap类包装flex项。以下是包装flex项目的代码片段- 让我们在flex-wrap类中设置一些flex项目- 您可以尝试运行以下代码来实现flex-wrap类- 示例
-
问题内容： 我正在尝试占用和div未使用的任何空间。为此，我将flex显示设置为列方向。然后，我将属性设置为1。似乎没有做任何事情。 注意：不确定这是否重要，但是我正在进行一些嵌套的flex显示。 HTML CSS 问题答案： 您代码中的所有内容都可以正常工作。 唯一的问题是 您的flex容器没有指定的高度 。因此，高度解析为，表示内容的高度。 该属性在容器中分配 可用 空间。容器中没有可用空间，
-
问题内容： 我想在页脚元素的右边放置文本（foo链接）。 我需要保留页脚显示。 但是当我将其设置为时，span不再起作用。 问题答案： 该属性在flex容器中被忽略。 根据flexbox规范： 3. Flex容器：和显示值 一个伸缩容器为其内容建立一个新的_伸缩格式上下文_。这与建立块格式化上下文相同，除了使用Flex布局而不是块布局。 例如，浮点数不会侵入flex容器，并且flex容器的边距不会
-
我正在尝试用flex创建一个布局（将是一个音乐播放器）。 我有3个按钮（上一个、播放和下一个，用红色方块表示），我总是希望它们在同一条线上。 然后，我想在按钮右侧显示一些歌曲信息（当前时间、歌曲标题和总时间）。 我几乎总是希望总时间在最右边，歌曲标题填满剩余的宽度（使用），但随着窗口变小，用省略号截断。 有人知道如何调整它以使其正常工作吗？ https://jsfiddle.net/13ohs7j