Question

我使用flexbox，如下所示max-width。此代码适用于Google Chrome并提供结果：

但它在Internet Explorer中删除错误并将其显示在一行：

我不知道max-width有什么问题，我该如何解决这个问题......有些人会帮忙！

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

＆＃13;

<!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>

＆＃13;

flexbox max-width和IE

1 个答案: