しっかりしたCSSの理解が不足していたので要素の横並びにfloatや管理画面等ではBootstrapのグリッドレイアウトに頼っていたため流行りのflexboxの概要を確認してみた内容の覚え書き。
親要素よりも大きい子要素を10個準備
親の枠を超えた10個のdivタグを用意してわかりやすくするために色をつける
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>flexbox</title>
</head>
<body>
<div class="container">//親要素
//子要素10個
<div class="sample1">1</div>
<div class="sample2">2</div>
<div class="sample3">3</div>
<div class="sample4">4</div>
<div class="sample5">5</div>
<div class="sample6">6</div>
<div class="sample7">7</div>
<div class="sample8">8</div>
<div class="sample9">9</div>
<div class="sample10">10</div>
</div>
</body>
</html>
CSSは要素ひとつひとつに色をつけたのでcssが冗長になってしまったが、最後の.containerと.sample(n)のheightに注目してもらえばOK
/* ここは背景色を指定しているだけ */
.sample1 {
background-color: red;
}
.sample2 {
background-color: blue;
}
.sample3 {
background-color: aqua;
}
.sample4 {
background-color: yellow;
}
.sample5 {
background-color: greenyellow;
}
.sample6 {
background-color: palevioletred
}
.sample7 {
background-color: gray;
}
.sample8 {
background-color: royalblue;
}
.sample9 {
background-color: lightseagreen;
}.sample10 {
background-color :violet;
}
/* heightが400pxしかない親要素*/
.container {
width: 98%;
height: 400px;
background-color: papayawhip;
}
/*重なれば親のheightを遥かに超えていく子要素たち*/
.sample1 ,.sample2 ,.sample3 ,.sample4 ,.sample5 ,.sample6 ,.sample7 ,.sample8 ,.sample9, .sample10 {
width: 100px;
height: 100px;
font-size: 400%;
}
index.htmlの画面表示を確認すると当然400pxの親要素（背景色が肌色）には100pxの子要素が4つぶんしか入らず、それより多いdiv要素は枠からはみ出してしまっている。
親要素のCSSプロパティにdisplay: flex;を追加
いよいよ親要素の"container"にflexboxのプロパティを追加する
...
.container {
width: 98%;
height: 400px;
background-color: papayawhip;
display: flex;/*これを追加！*/
}
...
ブラウザ確認をすると、、、
子要素が横並びになった！！!
私はこれまでfloat: left;やBootstrapのcol,rowを使って横並びを実現していましたがこれからはcssに一行た足すだけで良さそうです。
ちなみに今回ブロック要素のdivに対してなのでdisplayプロパティに対して"flex"と設定しましたが,pタグなどのインライン要素に対しては"inline-flex"と指定できるようです。
その場合inline-block + flexのような効果になるそうです。（すみません、試していません。）
また画面サイズを縮めて見ても親要素の幅に対応して勝手に縮小してくれる。
さらに親要素にflex-directionプロパティを設定してみる。
row-reverse(右から左へ横一列に並べる)
...
.container {
width: 98%;
height: 400px;
background-color: papayawhip;
display: flex;
flex-direction: row-reverse;
}
...
↓
並び順が逆になった。
flex-directionに指定するプロパティには以下のようなものがある。
・row(初期値：左から右へ横一列に並べる)
・column-reverse（右から左へ横一列で並べる）
・column（上から下へ縦一列で並ぶ）
・column-reverse（下から上へ縦一列で並ぶ）
さらに親要素にflex-wrapプロパティを設定してみる。
...
.container {
width: 98%;
height: 400px;
background-color: papayawhip;
display: flex;
flex-direction: row;
flex-wrap: wrap;/*これを追加*/
}
...
↓
子要素の大きさは縮まらず、親要素の枠内に収まらない場合は改行される。
※画像はブラウザサイズ縮小時
flex-wrapに指定するプロパティには以下のようなものがある。
・no-wrap(初期値：改行しない)
・wrap（親要素に収まりきらない場合は改行する）
・wrap-reverse（ 〃 下から上に改行する）
最後に
これらの操作はあくまで基本的な部分の触りだと思うので、応用的な使い方については別途、実践で使う中で追記していきたいと思います。