CSS flex-startとalign-itemsで垂直方向の位置を指定する

2023年4月12日

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

構文
display: flex;
align-items: flex-start;
flex＋align-itemsは、要素の垂直方向の位置を指定できます。
flex-startは、先頭に揃えます。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  /*親クラスの定義*/
  .parentA { 
    display: flex;
    align-items: flex-start;
    width: 180px;
    height: 70px;
    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