CSS flexとcolumn-reverseで要素を垂直方向で逆にする

2023年4月12日

環境
Google Chrome 112.0.5615.49（Official Build）（64 ビット）
Windows 10 Home 64bit

書式
display: flex;
flex-direction: column-reverse;
flex＋flex-directionは、要素の並び順を逆にできます。
column-reverseは要素を逆にします。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  /*親クラスの定義*/
  .parentA { 
    display: flex;
    flex-direction: column-reverse;; /*要素の並び順を逆にする*/
    width: 150px;
    height: 100px;
    border: 1px solid #000;
  }
  /*子クラスの定義*/
  .childA { 
    background: skyBlue;
    text-align: center;
    width: 80px;
    border: 1px solid #000;
  }
</style>
</head>
<body>

<div class="parentA">
  <div class="childA">東京</div>
  <div class="childA">大阪</div>
  <div class="childA">福岡</div>
</div>

</body>
</html>

実行結果
要素「class="childA"」を垂直方向で逆にします

CSS

Posted by arkgame

関連投稿: