HTML&CSS： Flexbox justify-contentについての備忘録

2021.12.01

HTMLを装飾するCSSにおいて、Flexboxのjustify-contentについて気になる使い方があったので備忘録にまとめておく。

まずは基本となるHTMLコードは下記を使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">fbox1</div>
        <div class="flex-item">fbox2</div>
        <div class="flex-item">fbox3</div>
        <div class="flex-item">fbox4</div>
        <div class="flex-item">fbox5</div>
      </div>

</body>
</html>

flex-start

CSSファイルは下記が基本形。
今回はこの.flex-containerのjustify-content: の部分を変更する。

8行目、.flex-containerのjustify-content: をflex-startに設定すると、コードの下の様に、
flex-direction: row; width: 400px;の始まり（ここでは左）からの並びになる。

.flex-container {
  display: flex;
  flex-direction: row;  width: 400px;
  height: 200px;
  border: 1px solid gray;
  background: lightcyan;
  align-items: center; 
  justify-content: flex-start;
}

.flex-item {
  width: 50px;
  height: 50px;
  background: rgb(0, 238, 255);
}
.flex-item:nth-of-type(odd) {
  background: rgb(0, 255, 85);
}
flex-directionの始まり、左から詰めた並びになる

flex-end

同じ場所をflex-endに設定すると、逆に終わり（ここでは右）からの並びになる。

flex-directionの終わり、右から詰めた並びになる

center

同様に、centerに設定すると、中央に並ぶ。

真ん中に並ぶ

space-between

そして、justify-contentをspace-betweenに設定すると、等間隔で並ぶ。

範囲内で等間隔に並ぶ

space-around

そして、justify-contentをspace-aroundに設定すると、それぞれのBoxの両端を含めて等間隔で並ぶ。

両端を含めて等間隔で並ぶ。

組み合わせ

以上の基礎を元に、少し設定を変えたり組み合わせてみる。

両サイドにボタン

CSS文のjustify-contentはspace-betweenに設定、HTML文の11行目以降について、fbox3以降をコメントアウト。

    <div class="flex-container">
        <div class="flex-item">fbox1</div>
        <div class="flex-item">fbox2</div>
        <!-- <div class="flex-item">fbox3</div>
        <div class="flex-item">fbox4</div>
        <div class="flex-item">fbox5</div> -->
    </div>

するとこの2つのboxは両端に来る。
space-betweenなら確かにこうなる。

グループ分け（縦）

コメントアウトを戻して、fboxをdivで123と45のグループに分けてみる。

       <div class="flex-container">
        <div>
        <div class="flex-item">fbox1</div>
        <div class="flex-item">fbox2</div>
        <div class="flex-item">fbox3</div>
        </div>
        <div>
        <div class="flex-item">fbox4</div>
        <div class="flex-item">fbox5</div>
        </div>
    </div>
fboxをdivで分ける

グループごとに左右に分かれた。

グループ分け（横）

このdivタグにflex-containerのクラスを付けると、それぞれのグループでspace-betwenが適用される。

    <div class="flex-container">
        <div class="flex-container">
        <div class="flex-item">fbox1</div>
        <div class="flex-item">fbox2</div>
        <div class="flex-item">fbox3</div>
        </div>
        <div class="flex-container">
        <div class="flex-item">fbox4</div>
        <div class="flex-item">fbox5</div>
        </div>
    </div>

不要な線を消す

真ん中の線が邪魔なので消したい場合、まず.flex-containerのborderをコメントアウト、これで外の枠線が消える。
次に大枠のクラスflex-bigcontainerを作成、display、flex-directin、borderを設定。

.flex-container {
  display: flex;
  flex-direction: row;  width: 400px;
  height: 200px;
  /* border: 1px solid gray; */
  background: lightcyan;
  align-items: center; 
  justify-content: space-between;
}

.flex-item {
  width: 50px;
  height: 50px;
  background: rgb(0, 238, 255);
}
.flex-item:nth-of-type(odd) {
  background: rgb(0, 255, 85);
}

.flex-bigcontainer {
  display: flex;
  flex-direction: row; width: 400px;
  border: 1px solid gray;
}

左側と右側の表示を変える

flex-containerをlとrに分け、flex-containerrのjustify-contentはflex-endとすると、左は等間隔に、右は右詰めで表示にできる。

    <div class="flex-bigcontainer">
        <div class="flex-containerl">
        <div class="flex-item">fbox1</div>
        <div class="flex-item">fbox2</div>
        <div class="flex-item">fbox3</div>
        </div>
        <div class="flex-containerr">
        <div class="flex-item">fbox4</div>
        <div class="flex-item">fbox5</div>
        </div>
    </div>
.flex-containerl {
  display: flex;
  flex-direction: row;  width: 400px;
  height: 200px;
  /* border: 1px solid gray; */
  background: lightcyan;
  align-items: center; 
  justify-content: space-between;
}

.flex-containerr {
  display: flex;
  flex-direction: row;  width: 400px;
  height: 200px;
  /* border: 1px solid gray; */
  background: lightcyan;
  align-items: center; 
  justify-content: flex-end;
}
（以下略）

入力画面風に

この並びで入力画面を並べるイメージは下記。

HTMLで左からid/種別/項目/編集/削除ボタンを並べる。

    <div class="flex-bigcontainer">
        <div class="flex-containerl">
        <div class="flex-item">id</div>
        <div class="flex-item">種別</div>
        <div class="flex-item">項目</div>
        </div>
        <div class="flex-containerr">
        <div class="flex-item">編集</div>
        <div class="flex-item">削除</div>
        </div>
    </div>

最終的なCSS

並びは同様、それぞれのボックス内の文字を中央に寄せる為、
display: flex;
align-items: center;
justify-content: center;
を追記。

.flex-containerl {
  display: flex;
  flex-direction: row;  width: 400px;
  height: 200px;
  /* border: 1px solid gray; */
  background: lightcyan;
  align-items: center; 
  justify-content: space-between;
}

.flex-containerr {
  display: flex;
  flex-direction: row;  width: 400px;
  height: 200px;
  /* border: 1px solid gray; */
  background: lightcyan;
  align-items: center; 
  justify-content: flex-end;
}

.flex-item {
  width: 50px;
  height: 50px;
  background: rgb(0, 238, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-item:nth-of-type(odd) {
  background: rgb(0, 255, 85);
}

.flex-bigcontainer {
  display: flex;
  flex-direction: row; width: 400px;
  border: 1px solid gray;
}

Flexboxはブロック分けと組み合わせると、より自由なレイアウトが出来る事、

Flexboxには
“align-items: center;” => 縦（交差軸＝Cross axis）の位置を調整
“justify-content: center;” => 横（主軸＝main axis）の位置を調整
の設定がありこれを使うと中央寄せが楽にできる。
と言う事が事が分かった。

この辺りの詳細については下記も読みたい。

フレックスコンテナー内のアイテムの配置

「アイリスオーヤマ 電動ドライバー 充電式 軽量 RD110」
箪笥のレールが壊れ取り替えが必要になった際に買った電動ドライバー。
当初どれだけ使えるものか半信半疑だったが、操作が簡単、手元を照らすライトも便利、結構パワフルと三拍子揃っていて、とても便利に使えた。
今は13％オフ、たまにある安いタイミング。

コメント

タイトルとURLをコピーしました