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が効かないときの確認すること

2020年のバナナ

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

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