flexbox 最大宽度和 IE答案

【问题标题】：flexbox max-width and IEflexbox 最大宽度和 IE
【发布时间】：2018-09-03 10:25:02
【问题描述】：

我将flexbox 与max-width 一起使用，如下所示。此代码适用于 Google Chrome 并给出结果：

但它在 Internet Explorer 中出现错误，会擦除开头并将其显示在一行中：

我不知道max-width 出了什么问题，我该如何解决这个问题...请大家帮忙！

.d1 {
  background: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
}

<div class="d1">
  A Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test B
</div>

【问题讨论】：

您没有包含前缀 flexbox 属性以获得最佳浏览器支持，因此根据您所讨论的 IE 版本，Flexbox 可能完全不受支持，或者您可能缺少必要的前缀属性之一。见Backwards Compatibility of Flexbox。还可以查看 Flexy Boxes 并打开“生成旧版 flexbox 样式”。

标签： html css internet-explorer flexbox

【解决方案1】：

将flex-flow: row wrap; 与align-items: center 一起使用，或者将flex-flow: column wrap; 与justify-content: center; 一起使用。

检查我的代码是否可以正常工作。

<!DOCTYPE html>
<html>

<head>
  <style>
    .d1 {
    color: #fff;
      background: blue;
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      max-width: 500px;
    }
  </style>
</head>

<body>

  <div class="d1">
    A Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test B
  </div>

</body>

</html>

【讨论】：