0

This property flex-flow and this one display:flex; doesn't work in Safari, mobile Opera, etc. I'm trying to find a problem for about a week and still got nothing. My code looks this way:

.contentleft,
.contentright {
  width: 200px;
  height: 400px;
  background: red;
}
.contentcenter {
  width: 400px;
  height: 400px;
  background: blue;
}
.contentleft,
.contentright,
.contentcenter {
  display: inline-block;
}
.right,
.left {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px auto;
}
@media (min-width: 481px) and (max-width: 640px) {
  .content {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
  }
  .contentright {
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    order: 2;
    display: -webkit-flex;
    /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-flex;
    /* OLD: Firefox (buggy) */
    display: -ms-flex;
    /* MID: IE 10 */
    display: flex;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
  }
  .contentleft {
    -webkit-order: 3;
    -moz-order: 3;
    -ms-order: 3;
    order: 3;
    display: -webkit-flex;
    /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-flex;
    /* OLD: Firefox (buggy) */
    display: -ms-flex;
    /* MID: IE 10 */
    display: flex;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
  }
  .contentcenter {
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
    order: 1;
  }
}
<div class="content">
  <div class="contentleft">
    <div class="left"></div>
    <div class="left"></div>
    <div class="left"></div>
  </div>
  <div class="contentcenter"></div>
  <div class="contentright">
    <div class="right"></div>
    <div class="right"></div>
    <div class="right"></div>
  </div>
</div>

Link to CodePen

Thank you beforehand.

chirag
  • 1,761
  • 1
  • 17
  • 33
Martin
  • 109
  • 2
  • 8

0 Answers0