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); }
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/197227756bc2a56118ba22a38d2c9e36.png?resize=812%2C412&ssl=1)
flex-end
同じ場所をflex-endに設定すると、逆に終わり(ここでは右)からの並びになる。
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/7f498b65accf552d7a8e8e5d511aa897.png?resize=808%2C416&ssl=1)
center
同様に、centerに設定すると、中央に並ぶ。
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/ac23a4febbdaddfdab3b828317325a97.png?resize=816%2C408&ssl=1)
space-between
そして、justify-contentをspace-betweenに設定すると、等間隔で並ぶ。
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/ba1cda657baab4d3a74dea82b305f6de.png?resize=808%2C412&ssl=1)
space-around
そして、justify-contentをspace-aroundに設定すると、それぞれのBoxの両端を含めて等間隔で並ぶ。
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/18a36b3aeb99325ad20af2c41107ff10.png?resize=816%2C418&ssl=1)
組み合わせ
以上の基礎を元に、少し設定を変えたり組み合わせてみる。
両サイドにボタン
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>
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/2a7513dbfba68fc72c7dc8988b74ea97.png?resize=407%2C206&ssl=1)
するとこの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>
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/824c8811ce81f3580544b0c0fcb10b7c.png?resize=408%2C209&ssl=1)
グループごとに左右に分かれた。
グループ分け(横)
この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>
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/e81160a8182a6821954db40325a7d1be.png?resize=407%2C208&ssl=1)
不要な線を消す
真ん中の線が邪魔なので消したい場合、まず.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; }
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/bcda8f632de71f635083a3f4d5365688.png?resize=408%2C209&ssl=1)
左側と右側の表示を変える
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; } (以下略)
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/827a4481e022385b64bb235e0b707e46.png?resize=407%2C207&ssl=1)
入力画面風に
この並びで入力画面を並べるイメージは下記。
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; }
![](https://i0.wp.com/tazanrock.com/wp-content/uploads/2021/12/3384d940b9494d5f4e1628f6b8ca8889.png?resize=408%2C207&ssl=1)
Flexboxはブロック分けと組み合わせると、より自由なレイアウトが出来る事、
Flexboxには
“align-items: center;” => 縦(交差軸=Cross axis)の位置を調整
“justify-content: center;” => 横(主軸=main axis)の位置を調整
の設定がありこれを使うと中央寄せが楽にできる。
と言う事が事が分かった。
この辺りの詳細については下記も読みたい。
「アイリスオーヤマ 電動ドライバー 充電式 軽量 RD110」
箪笥のレールが壊れ取り替えが必要になった際に買った電動ドライバー。
当初どれだけ使えるものか半信半疑だったが、操作が簡単、手元を照らすライトも便利、結構パワフルと三拍子揃っていて、とても便利に使えた。
今は13%オフ、たまにある安いタイミング。
コメント