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

Question

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

.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;
}

.bold {
     font-weight: 600;
}

<div class = "align-right">
                  Purchase Date: &nbsp;
                  <span class = "bold"> 09/10/2018</span>
                </div>

Answer 1

以下内容适用于不同的浏览器。

.text-vcenter-right {
    height: 200px;
    width: 100%;
    background-color: grey;
    color: white;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: right;
    text-align:right;
}

<div class="text-vcenter-right">Text vertically centered and justified towards right</div>

Answer 2

需要在父元素中添加flex-方向：列；，以便在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; }