Flexbox：打包IE11中的弹性项目 [英] Flexbox: wrap flex items in IE11 broken

问题描述

我试图用新的CSS3 Flexbox的功能来构建表单布局。
目标是当字段集中元素的数量，更改字体大小或更改视图大小时，字段集的元素排列正确。
表单布局应该适用于所有现代浏览器：Chrome 35，Firefox 29和 IE 11
它看起来非常有希望，除非它在IE 11中不起作用。 >

我简化了代码并将其发布到 http://jsfiddle.net/ T4RL6 / 。
这里看起来像Chrome和Firefox一样正确。

p> .fieldset {
background-color：green;
border：1px纯蓝色;
display：flex;
flex-direction：row;
flex-wrap：wrap;
flex-flow：换行;
align-content：flex-start;

$ / code>

但是IE 11并没有包装这些元素，所以它们用完了#rightdiv。
我很确定它应该在IE11中工作，而且你不需要-ms-flex- *
http://msdn.microsoft.com/de-de/library/ie/dn265027%28v=vs .85％29.aspx

解决方案

看起来你正在调用 display：flex ;几乎每个元素上都有。只有需要灵活的容器应该具有该属性。这是我想到的，它似乎是按照你所要求的方式。

  * {
 margin：0px; 
 padding：0px; 
} 
 
 body {
 background-color：black; 
 font-family：Verdana sans-serif; 
 font-size：20px; 
} 
 
 #content_wrapper {
 box-sizing：border-box; 
 padding：20px 20px; 
宽度：100％; 
身高：100％; 
} 
 
 #main_wrapper {
 display：flex; 
 min-height：20px; 
 overflow：hidden; 
 border：5px纯红色; 
} 
 
 #right {
 flex：1 auto; 
 width：400px; 
背景：#cccccc; 
} 
 
 fieldset {
 margin：10px 0px; 
} 
 
 .fieldset {
 background-color：green; 
 border：1px纯蓝色; 
} 
 
 #pdf {
 width：100％; 
身高：100％; 
} 
 
 img {
 width：100％; 
身高：100％; 
} 
 
 
表格{
 margin：20px 20px; 
} 
 
 .field {
 display：flex; 
 margin：10px 10px; 
 border：1px纯黑色; 
 align-content：stretch; 
 padding：5px 5px; 
} 
 
 .smallInput {
 / * flex：1 0 0; * / 
} 
 
 .bigInput {
 / * flex：2 0 0; * / 
} 
 
 input {
 flex：2; 
} 
 
标签{
 flex：1; 
 margin-right：10px; 
 
  

以下是一个更新了小提琴，以便在行动中看到它。

I am trying to build a form layout with the capabilities of the new CSS3 Flexbox. The goal is that the elements of a fieldset arrange themselves properly, while you change the number of elements in a fieldset, change the font-size or change the view size. The form layout should work in all modern browsers: Chrome 35, Firefox 29 and IE 11 It looks very promising except that it does not work in IE 11.

I simplified the code and post it on http://jsfiddle.net/T4RL6/. Here view looks correct like Chrome and Firefox.

Most important CSS code part:

.fieldset {
    background-color: green;
    border: 1px solid blue;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-start;
}

But IE 11 does not wrap the elements at all, so they run out of "#right" div. I am pretty sure it should work in IE11 and you don't need -ms-flex-* http://msdn.microsoft.com/de-de/library/ie/dn265027%28v=vs.85%29.aspx

解决方案

It looks like you are calling display: flex; on nearly every element. Only the container that needs to be flexible should have that property. Here's what I've come up with, and it seems to be working the way you've requested.

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: black;
    font-family: Verdana sans-serif;
    font-size: 20px;
}

#content_wrapper {
    box-sizing: border-box;
    padding: 20px 20px;
    width: 100%;
    height: 100%;
}

#main_wrapper {
    display: flex;
    min-height: 20px;
    overflow: hidden;
    border: 5px solid red;
}

#right {
    flex: 1 auto;
    width: 400px;
    background: #cccccc;
}

fieldset {
    margin: 10px 0px;
}

.fieldset {
    background-color: green;
    border: 1px solid blue;
}

#pdf {
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
}


form {
    margin: 20px 20px;
}

.field {
    display: flex;
    margin: 10px 10px;
    border: 1px solid black;
    align-content: stretch;
    padding: 5px 5px;
}

.smallInput {
    /* flex: 1 0 0; */
}

.bigInput {
    /* flex: 2 0 0; */
}

input {
    flex: 2;
}

label {
    flex: 1;
    margin-right: 10px;
}

and here's an updated fiddle to see it in action.

这篇关于Flexbox：打包IE11中的弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！