Question

我正在使用flexbox显示各种项目，其中布局将根据屏幕大小进行更改，以便在设备上运行。在Chrome中，所有内容都按预期显示，但从最大尺寸到中等大小的屏幕时，IE重叠。我设法在jsfiddle中复制了这个。

span { display: inline-flex; }
.max-width { width: 100%; }

#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; }

.box { border: 0.75pt solid #aaaaaa; margin: 0pt 5pt 11pt 0pt; flex:auto; }
.box { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; box-shadow: 0pt 2.2pt 4pt #aaaaaa; }
    .box .content { padding: 0pt 4pt 0pt 4pt; }
    .box .title { background: #0094ff; color: white; padding: 4pt; font-variant: small-caps; -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; }
    .box p { color: #333; padding: 7.2pt; }

.metricbox { border: 0.75pt solid; width: 72pt; height: 49pt; margin: 2pt; display: inline-block; position: relative; }
.metricbox { -moz-border-radius-topright: 4pt; -moz-border-radius-topleft: 4pt; -webkit-border-top-right-radius: 4pt; -webkit-border-top-left-radius: 4pt; border-top-left-radius: 4pt; border-top-right-radius: 4pt; -moz-border-radius-bottomright: 4pt; -moz-border-radius-bottomleft: 4pt; -webkit-border-bottom-right-radius: 4pt; -webkit-border-bottom-left-radius: 4pt; border-bottom-left-radius: 4pt; border-bottom-right-radius: 4pt; }
    .metricbox .content { text-align: center; font-weight: bold; font-size: 15pt; padding: 3pt; }
    .metricbox .item { font-size: 8pt; color: black; font-weight: bold; text-transform: uppercase; width: 100%; text-align: center; position: absolute; bottom: 0; }

.mb-base { border-color: black; color: black; }
.mb-good { border-color: #339933; color: #339933; }
.mb-bad { border-color: #ff0000; color: #ff0000; }
.mb-test { border-color: #e18412; color: #e18412; }

/*Used to modify display as screen sizes change*/
.flex-123, .flex, .flex-12, .flex-3, .flex-stack { display: flex; align-items: stretch; }
.flex-3 { align-content:flex-start; }
.flex-stack { flex-direction: column; }

/*Media widths originally:  450, 650, 758, 900, 978px...converted to pt at 100px = 72pt */
@media screen and (min-width: 72pt) {
    #canvasMap { width: inherit; }
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: column; }
    .flex-3 { flex-direction: column; }
}

/*@media screen and (min-width: 758px) {*/
@media screen and (min-width: 432pt) {
    #canvasMap { width: 288pt; }
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: row; }
    .flex-3 { flex-direction: row; }
}

@media screen and (min-width: 710pt) {
    #suppliermetrics { min-width: 168pt; }
    .flex-123 { flex-direction: row; }
    .flex-12 { flex-direction: row; }
    .flex-3 { flex-direction: row;  }
}

我已尝试过研究中推荐的各种弹性设置，但没有运气。

感谢任何反馈。

Answer 1

经过大量的试验和错误后，我终于解决了这个问题，以便IE按照Chrome浏览器的需要行事。 CSS需要进行小的调整以及添加额外的子弹性容器（flex-1）并将flex重命名为flex-2。

由于为#canvasmap和#suppliermetrics设置了固定宽度，因此发生了冲突。 IE无法准确确定弹性容器的尺寸。当特定于flex容器（flex-1＆amp; flex-2）定义大小时，IE似乎可以按预期工作。

更改摘要：

有三个主要的flex块：flex-1，flex-2和flex-3。存在另一个容器（flex-12），它包裹flex-1和flex-2。外部柔性容器是flex-123。更新了flex块（flex-12），以便使用自己的flex容器定义每个子项。

添加了Flex容器（flex-1）。
Flex容器'flex'已重命名为'flex-2'。
三个主要的柔性块（flex-1，flex-2，flex-2_定义为flex-direction：row
CSS：#canvasmap宽度从288pt变为'inherit'。这样做时，flex-1的最小宽度设置为中间屏幕尺寸，“未设置”设置为最小屏幕尺寸。
灵活容器flex-12宽度在最大屏幕尺寸
在最大屏幕尺寸
对于最大屏幕尺寸，中间柔性块（flex-2）的最小宽度为168pt，而对于中等尺寸的屏幕则为“未设置”

小提琴分辨率：https://jsfiddle.net/c7xmfyd3/6/

/*#canvasMap { height: 288pt; width: 288pt; margin: 0pt; padding: 0pt; }*/
#canvasMap { height: 288pt; width: inherit; margin: 0pt; padding: 0pt; } 

/*Used to modify display as screen sizes change*/
/*.flex-123, .flex, .flex-12, .flex-3, .flex-stack { display: flex; align-items: stretch; }*/
/*.flex-3 { align-content:flex-start; }*/
.flex-123,  .flex-12, .flex-2, .flex-3, .flex-stack { display: flex; align-items: stretch; }
.flex-1, .flex-2, .flex-3 { flex-direction: row; }
.flex-stack { flex-direction: column; }


/*Media widths originally:  450, 650, 758, 900, 978px...converted to pt at 100px = 72pt */
@media screen and (min-width: 72pt) {
    /*#canvasMap { width: inherit; }*/
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: column; }
    .flex-3 { flex-direction: column; }
    .flex-1 { min-width: unset; }
}


@media screen and (min-width: 432pt) {
   /*#canvasMap { width: 288pt; }*/
    .flex-123 { flex-direction: column; }
    .flex-12 { flex-direction: row; }
    .flex-1 { min-width: 288pt; }
    .flex-2 { min-width: unset; }
    /*.flex-3 { flex-direction: row; }*/
}

@media screen and (min-width: 710pt) {
    /**#suppliermetrics { min-width: 168pt; }*/ 
    .flex-123 { flex-direction: row; }
    .flex-12 { flex-direction: row; }
    /*.flex-3 { flex-direction: row;  }*/
    .flex-12 { width: auto; }
    .flex-3 { width: 100%; }
    .flex-2 { min-width: 168pt; }
}

当媒体调整页面大小时，IE重叠flexbox

1 个答案: