align-itemsの使い方

1
2
3
<div class="flex"> <!-- ←この要素にalign-itemsを適用する! -->
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
.flex{
  display:flex;
  align-items:center;
}
.box{
  background:gold;
  flex:1;
  margin-right:1rem;
}
.box1{
  height:3em;
}
.box2{
  height:7em;
}
.box3{
  height:11em;
}

関連記事:
align-itemsが効かないときの確認すること

あけましておめでとうございます2024

旧年中は大変お世話になりありがとうございました。相変わらず、楽しく忙しく充実した1年になりました。なんと、、Webを2年もほったらかしにしてしまってたことに今気づきました。反省・・・ 本年もますます一層頑張りますので、よ・・・

2021年のバナナ

今日は12月31日、2021年もあとわずかになりました。今年こそは余裕を持って締め括る予定が、結局20時すぎてました😇 今年もたくさん、いろいろな仕事ができて、充実しすぎた1年になりました。今年も頑張ったと言い切れる。今・・・

2020年のバナナ

今日は12月31日、2020年もあと数時間になりました。 今年はたくさんまさかなことがありました。東京オリンピックがなくなったり、、、仕事が減ったり、、、いきつけのラーメン屋さんがなくなってしまったり、、、「仕事がなくな・・・

  • あけましておめでとうございます2024
  • 2021年のバナナ
  • 縦方向中央に配置したいとき、align-items:center;が効かないときに確認すること
  • WordPressでカスタムタクソノミー一覧ページがリダイレクトされたときのメモ
  • HTMLのpicture要素でレスポンシブに対応した画像を読み込む
  • imgのsrcsetでレスポンシブで最適な画像を設定する方法
  • 2020年のバナナ
  • 要素を中央に表示したい!CSSでtext-align:center が効かないときに確認すること
  • スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう
  • flexboxでページ全体のレイアウトを作ってみる
© b. All rights reserved.