【CSS3】Flexboxはブロック要素とインライン要素でしっかりと使い分ける

インライン要素liタグが横並びになって欲しいので、ulタグにflexboxの設定をしていました。

iOSのsafariや、Chromeなどでは問題なく表示できてたのですが、monacaのデバッガーアプリ（Android4.4）では横並びにはなるのですが、liタグに設定しているpaddingやmarginが効かない状態で横並びになってしまっておりました。

原因はflexboxをブロックレベルによって使い分けられていないことでした。。。

なので、今回はブロック要素とインライン要素での使い分けをまとめました。

ブロック要素にflexbox

div#container直下にある（例えば）divを横並びにする。

div#container{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

インライン要素にflexbox

liを横並びにする。

monacaのデバッッガーアプリではliにdisplay:block;をかけてもpaddingやmarginが反映されませんでした。

ul{
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

【参考サイト】
Using Flexbox: Mixing Old and New for the Best Browser Support | CSS-Tricks
Advanced layouts with flexbox