close

ホームページ作り方[フレックスボックス]

フレックスボックスレイアウトは水平方向と垂直方向の両方の整列やボックスの伸縮をを容易に操作することが可能です。記述でどのようにレイアウトが変わるかみていきます。

display: flex;で直近の子要素がフレックスボックスになります。

flex-direction プロパティでボックスの配置方向が指定できます。初期値はrowで主軸が水平方向です。主軸はフレックス項目が配置されている方向に走る軸です。主軸に直交するのが交差軸といいます。

flex-wrap プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

order プロパティは、フレックスボックスレイアウトでボックスが並ぶ順序を設定します。初期値は0で、数値が小さいものから、記述が先のものから順番に並びます。

box1
box2
box3
box4
box5
<div style = "height:600px; background: white; border: solid;">
<div style = "height:100px;background: deeppink;">box1</div>
<div style = "display: flex;">
<div style = "background: violet;">box2</div>
<div style = "background: salmon;">box3</div>
<div style = "background: royalblue;">box4</div>
</div>
<div style = "background: darkkhaki;">box5</div>
</div>

box1だけ高さを指定し、box2〜4に「display: flex;」でフレックスボックスにしました。本来縦並びの配置になるところが、コンテンツの幅で横並びになっています。主軸の規定値が水平方向だからです。その後のフレックスボックスを指定していないbox5は本来の位置・サイズで配置されています。

box1
box2
box3
box4
box5
<div style = "display: flex;">
<div style = "background: violet; flex:0 100px;">box2</div>
<div style = "background: salmon; flex: 1;">box3</div>
<div style = "background: royalblue;">box4</div>
</div>

box2〜4の横幅をflex一括指定プロパティで記述しました。box2はflex:0 100px;でflex-growを0、flex-basisを100ピクセル、box3を flex: 1;でflex-growを1と指定しました。

flex-growは主軸方向のフレックス伸長係数を指定するプロパティです。初期値は0で、余白が指定した数値の割合で分配されます。例えば1,1,0だと50%、50%、0%。2,1,1だと50%、25%、25%で分配されます。

flex-basisは横幅の規定値を指定します。

box2〜4はflex-growがそれぞれ0,1,0なので余白の全てがbox3に割り当てられます。box2はflex-basis指定された100ピクセルで固定、box3はコンテンツ幅になります。box2のflex:0 100px;をflex:100px;と指定するとflex:1 100px;と解釈されるので注意が必要です。

box1
box2
box3
box4
box5
<div style = ";height:600px; background: white; border: solid;display: flex;">
<div style = "height:100px;background: deeppink;">box1</div>
<div style = "background: violet;">box2</div>
<div style = "background: salmon;">box3</div>
<div style = "background: royalblue;">box4</div>
<div style = "background: darkorange;">box5</div>
</div>
box1〜5の親要素にフレックスボックスを指定しました。横幅はコンテンツ幅、box1以外の縦幅は親要素の幅になります。主軸が水平方向なので左から右へ横並びになります。
box1
box2
box3
<div style = "height:600px; background: white; border: solid; display: flex; flex-flow: column;">
<div style = "height:100px;background: deeppink;">box1</div>
<div style = "display: flex;flex: 1;">
<div style = "background: violet; flex:0 100px;">box2</div>
<div style = "background: salmon; flex: 1;">box3</div>
<div style = "background: royalblue;">box4</div>
</div>
<div style = "background: darkkhaki;">box5</div>
</div>

box1〜5の親要素にdisplay: flex;flex-flow: column;を設定。flex-flowは flex-direction(主軸が水平軸か平行軸か)とflex-wrap(主軸の向き)の一括指定プロパティです。flex;flex-flow: column;で主軸を垂直軸に設定しています。そのためbox1、box2〜4、box5が横並びから縦並びに変わりました。

box2〜4の親要素にdisplay: flex;flex: 1;を設定。box1、box2〜4、box5のflex-growがそれぞれ0,1,0ですので垂直方向の余白は、box2〜4割り当てられます。

box4
box5

cssの基礎の基礎/ボックスモデル/ボックスの配置/文字の修飾/グリッドレイアウト/レスポンシブデザイン/

MDN Web Docs

The World Wide Web Consortium