display:blockとdisplay:columの違い

レスポンシブの幅の対応で詰まった時の対応方法を備忘録

Chromeの検証ツールでデバイス表示をした際にはボタンの配置は変わっていたが、ブラウザの画面を手動で大きい幅から小さい幅へ段々小さくした時に、ボタンが小さくなって変な表示になることがあった。

メディアクエリを使用してレスポンシブ対応をしていた時に、display:columをしていた。

これは昨日の学びで要素を縦に並べたい時にはdisplay:culomを使用するといいと教えてもらったから、それで記述していたがそれが原因だった。

display:blockを設置すると画面幅に合わせてボタンの幅がいい感じに広がってくれた。

縦書きにしたいときの選択肢として、columとblockは覚えておく