CSS flexとflex-directionで要素の並び順を逆にするサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
書式
1.display: flex;
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
親要素にdisplay:flexを指定します
2.flex-direction: column-reverse;
要素の並び順を逆にします。
使用例
<!DOCTYPE html> <html> <head> <style> /*親要素*/ .parentA { /*display:flexを指定*/ display: flex; /*要素の並び順を逆にする*/ flex-direction: column-reverse; width: 250px; border: 1px solid #000; } /*子要素*/ .childA { background: SkyBlue; text-align: center; width: 50px; border: 1px solid #000; } </style> </head> <body> <div class="parentA"> <div class="childA">ss</div> <div class="childA">tt</div> <div class="childA">yy</div> </div> </body> </html>
結果
子要素三つの並び順を逆にします。