CSS flexとnowrapを使用して要素を横に並べるサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
書式
1.display: flex;
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
親要素にdisplay:flexを指定します
2.flex-wrap: nowrap;
flex-wrapにnowrapを指定しています。子の要素は折り返しません。
使用例
<!DOCTYPE html> <html> <head> <style> /*親要素*/ .parentA { /*display:flexを指定*/ display: flex; /*子の要素は折り返しません*/ flex-wrap: nowrap; width: 120px; padding: 15px; border: 1px solid #000; } /*子要素*/ .childA { background: SkyBlue; text-align: center; width: 60px; border: 1px solid #000; } </style> </head> <body> <div class="parentA"> <div class="childA">to</div> <div class="childA">oo</div> <div class="childA">fu</div> </div> </body> </html>
結果
子要素三つが横に並べます、nowrapなので折り返しません。