Zenn
🍉

画面中央に要素を配置しつつ、その横にちょっと要素を足したい

2023/08/23に公開
CSS
Flexbox
tech

以下のようなUIを実現する方法です。

画面中央にボタン群を置きつつ、ボタン横にちょっと要素を足したいといった状態です。
（もっといいUIはあるという話はあるのでは？というのはさておき・・）

やり方はいくつかあると思うのですが、今日はflexboxを使ったやり方をまとめます。

全コード

以下に全コードを記載します。それぞれindex.htmlとstyle.cssとして同階層に配置することで動きます。

index.html
<!DOCTYPE html>
    <head>
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container">
            <div class="contents">
                <p>コンテンツスペース</p>
            </div>
            <div class="actionArea">
                <div class="space"></div>
                <div class="buttons">
                    <button class="buttonStyle">キャンセル</button>
                    <button class="buttonStyle">保存</button>
                </div>
                <div class="caution"><p>注意文：注意してね</p></div>
            </div>
        </div>
    </body>
</html>
style.css
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.contents {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 800px;
    height: 300px;
    background-color: rgb(207, 205, 205);
    padding: 10px;
    margin: 10px;
  }

  .actionArea {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
  }

  .space {
    flex-grow: 1;
  }

  .caution {
    flex-basis: 0;
    flex-grow: 1;
  }

  .caution p {
    color: blue;
  }

  .buttons {
    padding: 10px;
  }

  .buttonStyle {
    width: 100px;
  }

ブラウザに表示するとここうなります。

「キャンセル」「保存」ボタンが画面中央に配置され、ボタンの右に注意文が配置されています。

解説

cssのflexboxを利用しています。
以下では、部分部分でコードを抜き出しながら解説します。

3分割する

まずは、縦に3分割し、スペースエリア、ボタンエリア、注意文エリアとして、それぞれに要素を配置します。
divタグを使って3つに分割しています。

<div class="actionArea">
    <div class="space"></div><!-- スペースエリア -->
    <div class="buttons">
        <button class="buttonStyle">キャンセル</button>
        <button class="buttonStyle">保存</button>
    </div>
    <div class="caution"><p>注意文：注意してね</p></div>
</div>

親のdivタグに付与しているクラスactionAreaでdisplay: flexと flex-direction: row を指定しているため、3要素が横に並びます。
width: 100%は横幅を確保するため、align-items: centerはボタンと注意文を上下中央に並べるための設定です。

.actionArea {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}

ボタンを中央に配置しつつ、その横に要素を配置する

次に、ボタンを中央に設置しつつ、その横に要素を配置するためのCSS設定です。
スペースエリアと注意文エリアに対して、flex-grow: 1を設定し、注意文エリアには合わせてflex-basis: 0を設定します。

.space {
  flex-grow: 1;
}

.caution {
  flex-basis: 0;
  flex-grow: 1;
}

このようにすることで、注意文エリアのwidthを0とみなした状態（flex-basis: 0）で、スペースエリアと注意文エリアにflex-grow: 1が効きます。

擬似的ではありますが、注意文エリアに対してflex-basis: 0が効いている状態（flex-grow: 1は付与していない）は以下のようになるイメージです。

ボタンの左にwidth: 0のスペースエリアがあり、ボタンエリアがあり、ボタンの右にwidth: 0の注意文エリアがあり、その右側は全て余白となります（図にはわかりやすいように大きく書いています）。

この状態でflex-grow: 1が効くことで、（flex-grow: 1が設定してある）スペースエリアと注意文エリアに余白部分が等分で振り割られ、widthが指定されます。以下のようになります。

実際には注意文エリアには注意文が表示され、以下のようになります。

最後に

flexboxを使うと、一見どうすればできるのかな？というUIも意外と簡単に実現できます。
flexbox大好きなので、今後も小技を磨いていきたいです。
今回のUIの実現方法として、他にもやり方はあると思うのですが、わかる方はぜひコメントくださると嬉しいです。

Discussion