Html 证明flexbox中的内容在IE 11中不起作用

我试图让一个元素向右对齐。我使用了flexbox，因为我发现最容易将文本和任何图标完美对齐。下面的代码片段是我正在做的一个示例。该代码在Firefox和Chrome中运行良好，但在IE中无法使用justify内容。我已经有了“-ms flex pack”，但它没有做任何事情。IE中的内容是左对齐的，而不是右对齐的

。右对齐{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒子包：右；
-ms flex pack：对；
证明内容：正确；
文本对齐：右对齐；
}
.bold{
字号：600；
}

购买日期：
09/10/2018

您需要添加

弹性方向：列编码到父元素，以证明IE11中的内容是正确的

.align-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-align: center; 
    -ms-flex-align: center; 
        align-items: center; 
  -webkit-box-pack: right; 
    -ms-flex-pack: right; 
        justify-content: right;
  text-align:right;
  flex-direction: column; }

您需要添加
flex-direction:column编码到父元素，以证明IE11中的内容是正确的

.align-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-align: center; 
    -ms-flex-align: center; 
        align-items: center; 
  -webkit-box-pack: right; 
    -ms-flex-pack: right; 
        justify-content: right;
  text-align:right;
  flex-direction: column; }

以下内容在不同的浏览器中对我有效


.text vcenter右键{
高度：200px；
宽度：100%；
背景颜色：灰色；
颜色：白色；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒式包装：结束；
-ms-flex-pack：结束；
证明内容：正确；
文本对齐：右对齐；
}
文本垂直居中并向右对齐
以下内容适用于不同浏览器


.text vcenter右键{
高度：200px；
宽度：100%；
背景颜色：灰色；
颜色：白色；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒式包装：结束；
-ms-flex-pack：结束；
证明内容：正确；
文本对齐：右对齐；
}
文本垂直居中并向右对齐
Flex没有“左”或“右”的概念，因为可以使用
Flex-direction:row-reverse更改这些概念。因此，关键字是
flex start
和
flex end
。这意味着相同的关键字适用于任何
弹性方向，包括垂直方向。弹性没有“左”或“右”的概念，因为可以使用
弹性方向：行反转来更改这些关键字。因此，关键字是
flex start
和
flex end
。这意味着相同的关键字适用于任何
弹性方向
，包括垂直方向。