display:flexが効かない・横並びにならない原因と修正方法

display:flexは新しいCSSで、横並びにするときによく使う便利なCSSです。横並びと言えばfloatですがこれと同じように使うとCSSが効かず、うまく横並びにならないことがあります。

ここではdisplay:flexが効かない・横並びにならない原因と修正方法を説明します。

display:inline-blockで横並びにならない場合はこちら↓

display:flexを効かなくしたい（解除したい）ときはこちら↓

flexの基本はこちらの記事でおさらいしましょう↓

原因1.子要素にdisplay:flexを指定している

display:flexが効かない・横並びにならない原因の一つは子要素にdisplay:flexを指定してしまっていることです。

floatの場合は横並びにする要素そのもの（子要素）に「float」を指定しますが、flexの場合、横並びする要素そのもの（子要素）に「display:flex」を指定しても横並びになりません。

例）ul li の liを横並びにしたいと思います。

html

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

失敗例

失敗イメージ

• 
• 
• 

失敗CSS

li{
display:flex;
}

liを横並びにしたいのにli自体にdisplay:flexを指定していまっています。これではliは横に並びません。

flexはfloatとは違うのだよ！

修正方法.display:flexを親要素に指定

display:flexの子要素が横並びになります。

成功例

成功イメージ

• 
• 
• 

成功CSS

ul{
display:flex;
}

liを横並びにしたいので親要素のulにdisplay:flexを指定しています。
これで子要素であるliが横並びになります。

また、justify-content,align-items,flex-wrap,なども親要素に指定します。

原因2.親要素が改行可能で子要素が幅100％になっている

display:flexが効かない・横並びにならない原因のひとつは横並びになる条件を満たしてないからです。

幅を設定していない場合、子要素の内容によって幅が自動で広がります。
この状態で改行を許可している場合、横並びにならず改行されます。

html

<ul>
<li>1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目</li>
<li>2行目</li>
<li>3行目</li>
<li>4行目</li>
</ul>

失敗例

失敗イメージ

• 1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目
• 2行目
• 3行目
• 4行目

失敗CSS

ul{
display:flex;
flex-wrap:wrap;/* 改行許可 */
}

修正方法.flex-wrap:no-wrapで折り返さない

flex-wrap:no-wrapはflexの子要素の折り返しを許可しないCSSです。

flex-wrapは初期がno-wrap（改行不許可）なので「flex-wrap:wrap;」を削除するだけでもOKです。

また、子要素のwidthを調整することも重要です。

成功例

成功イメージ

• 1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目1行目
• 2行目
• 3行目
• 4行目

成功CSS

ul{
display:flex;
flex-wrap:no-wrap;/* 改行不許可 */
}

/*必要に応じて*/
li{
width:25%;
} 

原因3.display:blockで上書きしてしまっている

display:flexが効かない・横並びにならない原因のひとつはdisplay:blockなどでdisplay:flexが上書きされ、CSSが効いていない状態になっていることです。

display:flexも見た目だけはdisplay:blockに似ています。

違うのはその子要素の動きです。

途中までdisplay:blockで作っていて、子要素を横並びにしようとして、あるいはfloatを使うのをやめるために、display:flexに切り替える場合があります。

このときdisplay:blockを消し忘れて、その前にdisplay:flexを記述してしまうと、display:blockに上書きされてしまいます。

失敗例

<style>
ul{
display:flex;
list-style:none;
display:block;/*消し忘れ*/
}
li{
border:1px solid #999;
}
</style>
<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

display:flexが上書きされ、その子要素が横並びになっていません。

修正方法.display:blockを消す

display:blockを消すなどして、display:flexが優先されるようにしましょう。

display:blockを消すと↓下のように横並びになります。

これ自体はflexの問題ではなく、CSS記述ミスなのですが、意外とやりがちです。

原因4.flex-direcion:columnで縦並びにしている

flex-direcion:columnはflexの子要素を横並びではなく縦並びにするCSSです。

また、このときjustify-contentは縦方向の位置調整に変わり、align-itemsは横方向の位置調整に変わります。

justify-contentやalign-itemsが効かないと思ったときはflex-direcion:columnになっていないか要チェックです。

修正方法.flex-direcion:rowで上書き

flex-direcion:rowは初期値であり、子要素を横並びさせます。

flex-direcion:columnが不要なのであれば削除してもかまいません。

逆にflex-direcion:columnが意図的で必要なものの場合はjustify-contentで縦位置調整、align-itemsで横位置調整しましょう。

原因5.javascriptでdisplay:blockが指定されている

jQueryで「slideToggle」や「slideDown」を指定するとアニメーションしながら要素を表示することができます。

しかし、このとき「display:block」が指定されてしまいます。

これにより「display:flex」が上書きされ、効かなくなります。

修正方法1.javascriptでdisplay:flexを指定する

「slideToggle」や「slideDown」はやめて、javascriptでdisplay:flexを指定するとflexの状態で表示されます。

その代わりアニメーションはしません。

修正方法2.flexの親にdivを追加し、それを表示させる

「display:block」になってもいい要素（divなど）をflexの親として用意し、「slideToggle」や「slideDown」を指定しましょう。

番外編：印刷時diplay:flexは崩れる

印刷プレビューなどで確認できますが、display:flexを指定している要素がページをまたぐと崩れます。あるいは次ページに表示されません。

これは残念ながらバグのようで根本的な解決方法がありません。

回避時方法1.ページをまたがないようにする

ページをまたがなければ崩れないのでページをまたがないようにするという手があります。

display:flexがある要素、またはその親要素などからページが始まるようにし、1ページに収まるようにします。

その要素に「page-break-before:always」を指定します。

回避方法2.floatを使う

floatを使いたくないからdisplay:flexを使ったのですが、仕方ありません。floatを使いましょう。

「@media print{}」で印刷時のみ適用されるCSSを用意します。

その中で「display:flex」の要素を「display:block」にします。

この子要素に「float:left(またはright)」を指定します。
高さも固定で指定しましょう。

floatも使えない場合はやむをえません。横並べをあきらめて縦並びにしましょう。

その他

上記にも当てはまらない場合、他が原因かもしれません。
↓こちらの記事を参考にしてみてください。

特にケアレスミスがないか見直してみてください。

また、flexではなく関連したCSSが効いていない場合もあります。

まとめ

display:flexが効かない・横並びにならないときは以下を確認しましょう。

原因1.display:flexを子要素に指定している

親要素にdisplay:flexを指定しましょう。

原因2.親要素が改行可能で子要素が幅100％になっている

親要素を改行不可にして子要素の幅を指定してあげましょう。

原因3.display:blockで上書きしてしまっている

display:blockを消しましょう。

原因4.flex-direcion:columnで縦並びにしている

削除するかflex-direcion:rowで上書きしましょう。

原因5.javascriptでdisplay:blockが指定されている

javascriptでdisplay:flexを指定するか、親にdivを用意しそれに指定しましょう。

　

以上、display:flexが効かない・横並びにならない原因と修正方法でした。