display:flexで横並びにならない!CSSが効かない!

2016年4月11日2023年12月10日

CSSの覚書です。

flex プロパティは直接の親要素に適用された display: flex; によってのみ機能します。

間にただのdivがあるとダメです。

table-cellとリストのcssで画像リンクを横並び：レスポンシブデザインはどうなる？

画像などの要素を横並びにするとき、 floatやdisplay:inline-blockなどの方法がありますが、現在はtable-cellに落ち着いていますね。

ちなみに、それより過去のものとしてtableタグがあります。

<table>
<tbody>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</tbody>
</table>

テーブルが潰れたり、コードをいじるとスマホであふれたり、スマホなどの対応(if文で分けたり)が必要になったり無理やり実装しようとすると、コードが複雑化するので、もはや過去の産物ですかね。

レスポンシブデザインには向きませんね。

ではtableではなく、table-cellを使います。記事下に画像を2つ並べてみます

<ul class="post_bottom_widget">
	<li>画像リンク1</li>
	<li>画像リンク2</li>
</ul>

ul.post_bottom_widget{
	display:table;
}
ul.post_bottom_widget li{
	display:table-cell;
}

親にdisplay:table;、子要素にdisplay:table-cell;を書くだけのすごく簡単なものです。
これだけで横並びします。

もちろん、リストタグを使わず、divだけでも横並びできます。レスポンシブデザイン場合、画像がサイズ的に横並びできず、スマホでみると縦並びになります。

今回、2つのバナーをPCは横並び、スマホは縦並びにしたかったため、ちょうどよかったです。片方はアドセンス(adsence)を利用しました。 stinger5なんかでも利用できるかも。

vertical-align:middle;が使えます。中央合わせができるメリットが大きいですね。
中央合わせは他の方法でやると意外と面倒くさいことが多いので助かります。

ul.post_bottom_widget li{
	display:table-cell;
	vertical-align:middle;
}

floatなんか使うと解除も必要ですし、うっかりとトラブルになったりするので、この方法がいいですね。

よかったらシェアしてね！