Safari7.0で「display:flex」を使いたい

Question

iPad OS7の Safari7.0で確認したときに、下記CSSだと要素が縦並びでなく、横並びになります。
そもそもの使い方をマズってるのでしょうか・・・
何かご存知の方がいらっしゃいましたら、ご教授願います。

.flexBox {
  display: flex;
  display: -ms-flexbox; /* IE10以下対応 */
  display: -webkit-flex; /* Safari対応のつもり */
  flex-direction: column;
  -ms-flex-direction: column;/* IE10以下対応 */
  -webkit-flex-direction: flex; /* Safari対応のつもり */
  -webkit-box-orient: block-axis;
}

/* 親要素 */
#content {
  width: 300px;
  border: 1px solid #333;
}

/* 子要素's */
#content #sub1 { background-color: #55ffdd }
#content #sub2 { background-color: #ff55dd }
#content #sub3 { background-color: #ddff55 }

<div id="content" class="flexBox">
  <div id="sub1">1</div>
  <div id="sub2">2</div>
  <div id="sub3">3</div>
</div>

デモ、あります⇒ CodePen

Answer 1

本件と直接関係無いかもしれませんが、display などを複数書いた場合、最後に通った（問題が無い）スタイルが適用されます。プレフィックスつきのもから指定されたほうが良いと思います。

.flexBox {
  display: -webkit-flex; /* Safari対応のつもり */
  display: -ms-flexbox; /* IE10以下対応 */
  display: flex;
  -webkit-flex-direction: column; /* Safari対応のつもり */
  -ms-flex-direction: column;/* IE10以下対応 */
  flex-direction: column;
/* 旧 display: box; のための指定では？
  -webkit-box-orient: block-axis;
*/
}

また、単純な縦積みであれば、display: block; にしてしまうのも手かもしれません。

ちなみに、SCSSはCSSとして書き出したものを追記されたほうが回答できる人が増えると思います。

Comments

[CyberMergina]

> プレフィックスつきのもから指定されたほうが良い
> SCSSはCSSとして書き出したものを追記されたほうが回答できる人が増えると思います

どちらも有りがたいご指摘、ありがとうございます！！
後々ご覧になる方もいらっしゃるかと思うので、SCSS表記は直しておきます！

> 「-webkit-box-orient」
これについては、良く知りもせずに、試しにつけてそのままにしておりました・・・
display:boxの為の指定なのですね！ありがとうございます！

今回、子要素内部が結構複雑になっており、blockだと崩壊してしまったのです・・・
もう使い時だろうと意気揚々とflexboxを使ってみた次第です^^

Answer 2

-webkit-flex-direction: flex; /* Safari対応のつもり */

たぶん、flex-directionにflexという値は存在しないと思います。
columnにした場合もなにも変わりませんか？

Comments

[CyberMergina]

まさにその通りでした！凡ミスやらかしました・・・><
ありがとうございます！！！