проблемы совместимости css3 flexbox с Firefox и Safari

Я пытаюсь разобраться в моем макете flexbox, чтобы он был совместим с последними версиями IE/Firefox/Safari, и у меня есть проблемы с Firefox/Safari.

предлагаемая схема:

-----------------
     header
-----------------
    |
    |
    |
nav |  section
    |
    |
    |
    |

в Firefox и Safari <section> под nav

CSS:

body {
  width:50%;
  height:100%;
  display: -ms-flexbox;
  -ms-box-orient: horizontal;

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

  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

header {
    padding-top:100px;
    -webkit-flex: 1 100%;
    -moz-flex: 1 100%;
    -ms-flex: 1 100%;
    flex: 1 100%;
}

nav {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width:10%;
    height:100%;
}

section {
    -webkit-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4;
    width:40%;
    height:100%;
}
6
css flexbox layout

1 ответов

во-первых, это:

body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;
}

должно быть:

body {
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */
    body {
      display: flex;
    }
}

это ничего не делает, потому что IE не имеет реализации проекта 2009 Flexbox:

body {
  -ms-box-orient: horizontal;
}

вы также добавили префикс moz в свойствах из стандартного проекта Flexbox, но Firefox реализовал этот префикс бесплатно (только свойства 2009 должны иметь префикс moz).

даже если вы исправите все эти вещи, он все равно не будет работать в Safari или Firefox. Почему?

  • пока iOS7 не выйдет, Safari имеет только реализацию проекта Flexbox 2009. Он не может реализовать box-lines: multiple, что позволяет обернуть этот проект
  • Firefox имеет реализацию для проекта 2009 и стандартный проект, но ни одна из реализаций не поддерживает обертывание.
9