はじめに
HTML＆CSS入門講座の第十四弾として、display flexの使い方ついて紹介します。
この記事を読むと次の疑問について知ることができます。
●display flexとは？
●display flexの使い方はどうするの？
・親要素に対して指定できるflex系プロパティ
display: flex
flex-direction
flex-wrap
justify-content
align-items
・子要素に対して設定できるflex系プロパティ
order
align-self
flex-basis
flex-grow
flex-shrink
●display flexの使い方はどうするの？
・親要素に対して指定できるflex系プロパティ
display: flex
flex-direction
flex-wrap
justify-content
align-items
・子要素に対して設定できるflex系プロパティ
order
align-self
flex-basis
flex-grow
flex-shrink
HTML＆CSS入門講座（13）では、色々な箇条書きの書き方について解説してきました。
ここでは、display flexの使い方について深堀していきます。
display flexとは？
display flexは、displayのプロパティにflexを設定してやると、要素がflexボックスとなり、自由にレイアウトできるモジュール（Flexible Box Layout Module）です。
今までの解説では、displayプロパティにinlineやinline-blockを設定することで、要素を横並びなどにしてきましたが、例えば、前回の解説での箇条書きを横並びにしようとすると結構難しいのに対して、displayにflexを設定してやると簡単に横並びで表示してくれました。
このdisplayプロパティは、CCS3から導入された比較的新しいモジュールで、これからのレイアウトの主流となる書き方になると思います。
display flexの使い方
親要素に対して「display: flex;」を指定してやると、その親要素にある子要素はflexボックスとなり自由なレイアウトができるようになります。
flexには、親要素に対して指定するものと子要素に対して指定するものがありますので主要なものを表に載せます。
| プロパティ | 意味 | 対象 |
| display:flex | 子要素をflexボックスとして扱う指定 | 親要素 |
| flex-direction | 子要素の並べる方向の指定 | |
| flex-wrap | 子要素を１行に並べるか改行を入れて複数行に並べるかの指定 | |
| justify-content | 子要素同士をどのような間隔で並べるかの指定 | |
| align-items | 子要素のをどのように並べるかの指定 | |
| order | 子要素の並びの順番を指定 | 子要素 |
| align-self | 子要素の上下の位置を個別に指定 | |
| flex-basis | 子要素の幅を指定 | |
| flex-grow | 子要素の幅の広がり具合を指定 | |
| flex-shrink | 要素の幅の収縮を指定 | |
| flex | flex-grow、flex-shrink、flex-basis の一括指定 |
親要素に対して指定できるflex系プロパティ
display: flex
それでは、pタグで６つの文を作成し、それをまとめた「id:”flextamesi”」（何も設定せず）、「「id:”flextamesi01”」に「display:flex」を設定した場合でどのように違いがあるかを見てみましょう。
なお、分かり易くするためにそれぞれの親要素には、線の太さ2pxの黒の実線で囲んでいます。
<div id="flextamesi">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<div id="flextamesi01">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
#flextamesi {
border:black 2px solid;
}
#flextamesi01 {
display:flex;
border: 2px black solid;
} 結果は次の通り。
flex-direction
flex-directionは、要素の並べる向きを指定するプロパティで、次のようなものがあります。
それでは、上から順番にrow（初期値）、row-reverse 、column 、column-reverseを指定した場合にどのようになるかを見てみましょう。
<div id="flextamesi01">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
<div id="flextamesi02">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
<div id="flextamesi03">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
<div id="flextamesi04">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
#flextamesi01 {
display:flex;
flex-direction: row;
border: 2px black solid;
}
#flextamesi02 {
display:flex;
flex-direction: row-reverse;
border: 2px black solid;
}
#flextamesi03 {
display:flex;
flex-direction: column;
border: 2px black solid;
}
#flextamesi04 {
display:flex;
flex-direction: column-reverse;
border: 2px black solid;
}結果は次の通り。
flex-wrap
要素を見た画面で狭い画面の場合に、改行するかどうか、改行を正順でするか逆順でするかを指定します。
それでは、上から順番にnowrap （初期値）、wrap、wrap-reverse を指定した場合にどのようになるかを見てみましょう。
なお、「wrap」の効果が分かるようにwidth:80%に設定しています。
#flextamesi05 {
display:flex;
flex-wrap: nowrap;
border: 2px black solid;
width:80%;
}
#flextamesi06 {
display:flex;
flex-wrap: wrap;
border: 2px black solid;
width: 80%;
}
#flextamesi07 {
display:flex;
flex-wrap: wrap-reverse;
border: 2px black solid;
width: 80%;
｝
#flextamesi05 {
display:flex;
flex-wrap: nowrap;
border: 2px black solid;
width:80%;
}
#flextamesi06 {
display:flex;
flex-wrap: wrap;
border: 2px black solid;
width: 80%;
}
#flextamesi07 {
display:flex;
flex-wrap: wrap-reverse;
border: 2px black solid;
width: 80%;
}結果は次の通り。
justify-content
子要素同士をどのような間隔で並べるかの指定するもので、５つの指定があります。
それでは、上から順番にflex-start（初期値）、center 、flex-end、 space-between、space-aroundを指定した場合にどのようになるかを見てみましょう。
<div id="flextamesi08">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
<div id="flextamesi09">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
<div id="flextamesi10">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
<div id="flextamesi11">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
<p></p>
<div id="flextamesi12">
<p>Home </p>
<p>WordPress </p>
<p>アフィリエイト </p>
<p>雑記 </p>
<p>メルマガ登録 </p>
<p>問い合わせ </p>
</div>
#flextamesi08 {
display:flex;
justify-content:flex-start;
border: 2px black solid;
}
#flextamesi09 {
display:flex;
justify-content: center;
border: 2px black solid;
}
#flextamesi10 {
display:flex;
justify-content: flex-end;
border: 2px black solid;
}
#flextamesi11 {
display:flex;
justify-content: space-between;
border: 2px black solid;
}
#flextamesi12 {
display:flex;
justify-content: space-around;
border: 2px black solid;
} 結果は次の通り。
align-item
子要素のをどのように並べるかの指定に使います。
それでは、実際に指定して見ましょう。
この設定が分かり易いように、要素に高さを設定（３、5番目は高さ設定なし）し、各要素を赤で囲み、上からstretch(初期値）、flex-start 、center 、flex-endに指定しています。
<div id="flextamesi14">
<p class="ai1">Home </p>
<p class="ai2">WordPress </p>
<p class="ai3">アフィリエイト </p>
<p class="ai4">雑記 </p>
<p class="ai5">メルマガ登録 </p>
<p class="ai6">問い合わせ </p>
</div>
<div id="flextamesi15">
<p class="ai1">Home </p>
<p class="ai2">WordPress </p>
<p class="ai3">アフィリエイト </p>
<p class="ai4">雑記 </p>
<p class="ai5">メルマガ登録 </p>
<p class="ai6">問い合わせ </p>
</div>
<p></p>
<div id="flextamesi16">
<p class="ai1">Home </p>
<p class="ai2">WordPress </p>
<p class="ai3">アフィリエイト </p>
<p class="ai4">雑記 </p>
<p class="ai5">メルマガ登録 </p>
<p class="ai6">問い合わせ </p>
<p></p>
.ai1 {
height:30px;
border:red 2px solid;
}
.ai2 {
height:100px;
border:red 2px solid;
}
.ai3 {
border:red 2px solid;
}
.ai4 {
height:50px;
border:red 2px solid;
}
.ai5 {
border:crimson 2px solid;
}
.ai6 {
height:70px;
border:red 2px solid;
}
#flextamesi13 {
display:flex;
align-items:stretch;
border: 2px black solid;
}
#flextamesi14 {
display:flex;
align-items:flex-start;
border: 2px black solid;
}
#flextamesi15 {
display:flex;
align-items: center;
border: 2px black solid;
}
#flextamesi16 {
display:flex;
align-items:flex-end;
border: 2px black solid;
} 結果は次の通り。
子要素に対して設定できるflex系プロパティ
order
子要素の順番を指定できるプロパティです。
それでは、表示する順番を、「アプリエイト」、メルマガ登録、Home、問い合わせ、WordPress、雑記と変えてみましょう、
<div id="flextamesi17">
<p class="ai7">Home </p>
<p class="ai8">WordPress </p>
<p class="ai9">アフィリエイト </p>
<p class="ai10">雑記 </p>
<p class="ai11">メルマガ登録 </p>
<p class="ai12">問い合わせ </p>
<p></p>
ai7 {
height:30px;
border:red 2px solid;
order: 3;
}
.ai8 {
height:100px;
border:red 2px solid;
order: 5;
}
.ai9 {
border:red 2px solid;
order: 1;
}
.ai10 {
height:50px;
border:red 2px solid;
order: 6;
}
.ai11 {
border:crimson 2px solid;
order: 2;
}
.ai12 {
height:70px;
border:red 2px solid;
order: 4;
}
#flextamesi17 {
display:flex;
border: 2px black solid;
} 結果は次の通り。
align-self
個別の子要素に対して位置を設定する場合に使います。
ここでは、初期状態が上揃えになっていますので、「align-self」で一番目の要素である「Home」を中央揃え、下揃えをやり、次に全体を下揃えにしておいて、一番目の要素である「Home」を上揃いにしてみます。
<div id="flextamesi18">
<p class="ai13">Home </p>
<p class="ai2">WordPress </p>
<p class="ai3">アフィリエイト </p>
<p class="ai4">雑記 </p>
<p class="ai5">メルマガ登録 </p>
<p class="ai6">問い合わせ </p>
</div>
<p></p>
<div id="flextamesi19">
<p class="ai14">Home </p>
<p class="ai2">WordPress </p>
<p class="ai3">アフィリエイト </p>
<p class="ai4">雑記 </p>
<p class="ai5">メルマガ登録 </p>
<p class="ai6">問い合わせ </p>
</div>
<p></p>
<div id="flextamesi20">
<p class="ai15">Home </p>
<p class="ai2">WordPress </p>
<p class="ai3">アフィリエイト </p>
<p class="ai4">雑記 </p>
<p class="ai5">メルマガ登録 </p>
<p class="ai6">問い合わせ </p>
</div>
.ai13 {
height:30px;
border:red 2px solid;
align-self: center;
}
.ai14 {
height:30px;
border:red 2px solid;
align-self: flex-end;
}
.ai15 {
height:30px;
border:red 2px solid;align-self: flex-start;
}
#flextamesi18 {
display:flex;
border: 2px black solid;
}
#flextamesi19 {
display:flex;
border: 2px black solid;
}
#flextamesi20 {
display:flex;
align-items: flex-end;
border: 2px black solid;
} 結果は次の通り。
flex-basis
子要素にお対する幅指定で、display: flexでのみしか作用しません。
「width」と「flex-basis」が両方指定されている場合は、「flex-basis」の方が優先して使われます。
子要素の１、３，５番目の幅をそれぞれ、200px、5em、30％に指定した場合、どのように見えるか見てみましょう。
<div id="flextamesi21">
<p class="ai16">Home </p>
<p class="ai2">WordPress </p>
<p class="ai17">アフィリエイト </p>
<p class="ai4">雑記 </p>
<p class="ai18">メルマガ登録 </p>
<p class="ai6">問い合わせ </p>
</div>
.ai16 {
flex-basis: 200px;
border:red 2px solid;
}
.ai17 {
flex-basis: 5em;
border:red 2px solid;
}
.ai18 {
flex-basis: 30%;
border:red 2px solid;
}
#flextamesi21 {
display:flex;
border: 2px black solid;
}結果は次の通り。
flex-grow
こちらも子要素の幅を指定できるプロパティです。
flex-growを文字数が少ない雑記に3を指定してどのようになるか見てみましょう。
<div id="flextamesi22">
<p class="ai19">Home </p>
<p class="ai20">WordPress </p>
<p class="ai21">アフィリエイト </p>
<p class="ai22">雑記 </p>
<p class="ai23">メルマガ登録 </p>
<p class="ai24">問い合わせ </p>
</div>
ai19 {
flex-grow: 0;
border:red 2px solid;
}
.ai20 {
border:red 2px solid;
}
.ai21 {
border:red 2px solid;
}
.ai22 {
flex-grow: 3;
border:red 2px solid;
}
.ai23 {
border:red 2px solid;
}
.ai24 {
border:red 2px solid;
}
#flextamesi22 {
display:flex;
border: 2px black solid;
} 結果は次の通り。
flex-shrink
他の要素に対してどの程度縮めるかを指定するのに使います。
最初は、子要素全体にwidth:20emと言う大きな値を設定すると、通常は枠からはみ出ますが、flex-shrink（初期値：1に設定されているために、親枠に合うように調節してくれ、各子要素が均等の幅になります。
次に「Home」に「flex-shrink」を２に設定すると、「Home」は縮み、他が親枠に均等に並びます。
さらに、「アフィリエイト」に「flex-shrink」を5に設定すると、「アフィリエイト」は大きく縮み、他が親枠に均等に並びます。
以上の設定は、以下の通り。
<div id="flextamesi23">
<p class="child" id="ai25">Home </p>
<p class="child" id="ai26">WordPress </p>
<p class="child" id="ai27">アフィリエイト </p>
<p class="child" id="ai28">雑記 </p>
<p class="child" id="ai29">メルマガ登録 </p>
<p class="child" id="ai30">問い合わせ </p>
</div>
<p></p>
<div id="flextamesi24">
<p class="child" id="ai31">Home </p>
<p class="child" id="ai26">WordPress </p>
<p class="child" id="ai27">アフィリエイト </p>
<p class="child" id="ai28">雑記 </p>
<p class="child" id="ai29">メルマガ登録 </p>
<p class="child" id="ai30">問い合わせ </p>
</div>
<p></p>
<div id="flextamesi25">
<p class="child" id="ai31">Home </p>
<p class="child" id="ai26">WordPress </p>
<p class="child" id="ai32">アフィリエイト </p>
<p class="child" id="ai28">雑記 </p>
<p class="child" id="ai29">メルマガ登録 </p>
<p class="child" id="ai30">問い合わせ </p>
</div>
.child {
width: 20em;
}
#ai25 {
border:red 2px solid;
}
#ai26 {
border:red 2px solid;
}
#ai27 {
border:red 2px solid;
}
#ai28 {
border:red 2px solid;
}
#ai29 {
border:red 2px solid;
}
#ai30 {
border:red 2px solid;
}
#ai31 {
flex-shrink: 2;
border:red 2px solid;
}
#ai32 {
flex-shrink: 5;
border:red 2px solid;
}
#flextamesi23 {
display:flex;
border: 2px black solid;
}
#flextamesi24 {
display:flex;
border: 2px black solid;
}
#flextamesi25 {
display:flex;
border: 2px black solid;
} 結果は次の通り。
おわりに
如何だったでしょうか？
display flexとは？、display flexの使い方はどうするの？、親要素に対して指定できるflex系プロパティ、display: flex、flex-direction、flex-wrap、justify-content、align-items、子要素に対して設定できるflex系プロパティ、order、align-self、flex-basis、flex-grow、flex-shrinkなどについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント