CODEWITHSUNDEEP
htmlcssflexboxinternet-explorer-11
Catherine S.
Catherine S.

Reputation: 229

Justify-content in flexbox not working in IE 11

I am trying to get an element to align to the right. I've used flexbox as I've found it easiest to align the text and any icons perfectly. The code snippet below is an example of what I am doing. The code works perfectly in Firefox and Chrome, but the justify-content is not working in IE. I already have "-ms-flex-pack" but it is not doing anything. The content is left-aligned in IE instead of being right-aligned.

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

Upvotes: 0

Views: 7931

Answers (2)

Farhan Haider
Farhan Haider

Reputation: 1714

The following worked for me across different browsers.

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

Upvotes: 0

Adjunta
Adjunta

Reputation: 67

You need to add flex-direction: column; to the parent element in order to justify-content in 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; }

Upvotes: 2

Related Questions