flexbox 中的对齐内容在 IE 11 中不起作用答案

【问题标题】：Justify-content in flexbox not working in IE 11flexbox 中的对齐内容在 IE 11 中不起作用
【发布时间】：2019-03-01 07:02:06
【问题描述】：

我试图让一个元素向右对齐。我使用了 flexbox，因为我发现最容易完美地对齐文本和任何图标。下面的代码 sn-p 是我正在做的一个例子。该代码在 Firefox 和 Chrome 中完美运行，但 justify-content 在 IE 中不起作用。我已经有了“-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>

【问题讨论】：

Flex 没有“左”或“右”的概念，因为可以使用flex-direction: row-reverse 更改它们。因此，关键字是flex-start 和flex-end。这意味着相同的关键字适用于任何flex-direction，包括垂直关键字。

标签： html css flexbox internet-explorer-11

【解决方案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;
}

&lt;div class="text-vcenter-right"&gt;Text vertically centered and justified towards right&lt;/div&gt;

【讨论】：

【解决方案2】：

您需要将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; }

【讨论】：