最近便利なCSSおれおれAdvent Calendar 2023 – 08 日目

2 つの要素を左右に並べる場面は結構ありますよね。最上部のナビゲーションバーとか。ほら左端がロゴで右端にメニューみたいな。Flexbox だと簡単です。

例

<nav class="TopNavBar">
  <div>
    <a href="/">Ginpen.com</a>
  </div>
  <div>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

.TopNavBar {
  display: flex;
  justify-content: space-between;
}

その他

縦位置の調整は align-items: center みたいな感じです。入れ子にはご注意。

あと狭いとき折り返すなら flex-wrap: wrap ですね。よくできてる。

おしまい

よく align-items と justify-content で縦横どっちだっけってなります。ならない？

参考