CODEWITHSUNDEEP
cssflexbox
2ne
2ne

Reputation: 5976

Vertical Aligning - IE10 Flex box not working

I have my center aligning working in all browsers that support it apart from IE10. I think that I have the syntax correct and that it does it support it. Could anyone help? DEMO

html {
    height: 100%;
}
body {
    background: red;
    font-family: 'Open Sans';
    min-height: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -ms-flexbox;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
    text-align: center;
}
.box {
    background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #054B98;
    height: 620px;
    margin: 0 auto 20px;
    position: relative;
    width: 930px;
}

Upvotes: 8

Views: 19102

Answers (2)

digiwand
digiwand

Reputation: 1348

Adding an explicit height seems to be the appropriate solution.

From: Microsoft Connect - Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview

In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

Upvotes: 3

cimmanon
cimmanon

Reputation: 68319

You have the right display value, but all of the other Flexbox properties you're using are wrong. The proper translation would be like this:

body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

However, if you're using Flexbox for vertical alignment purposes, this might be what you're needing instead:

body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;

  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

Note that box-align and flex-align/align-items are not equivalent properties, but they're performing the same task here.

Upvotes: 13

Related Questions