【CSS】display flexの使い方|HTML&CSS入門講座(14)

HTML&CSS
この記事は約26分で読めます。

はじめに

 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
 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 子要素を1行に並べるか改行を入れて複数行に並べるかの指定
justify-content 子要素同士をどのような間隔で並べるかの指定
align-items 子要素のをどのように並べるかの指定
order 子要素の並びの順番を指定 子要素
align-self  子要素の上下の位置を個別に指定
flex-basis 子要素の幅を指定
flex-grow 子要素の幅の広がり具合を指定
flex-shrink 要素の幅の収縮を指定
flex flex-grow、flex-shrink、flex-basis の一括指定

親要素に対して指定できるflex系プロパティ

display: flex

 それでは、pタグで6つの文を作成し、それをまとめた「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  : 縦並び(逆順) 下→上
 それでは、上から順番に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  」 逆順に改行
 それでは、上から順番に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

 子要素同士をどのような間隔で並べるかの指定するもので、5つの指定があります。

flex-start(初期値) :  左寄せ 
center  : 中央揃え
flex-end  : 右寄せ
space-between  : 均等配置(左右は詰める)
space-around  : 均等配置(左右も開ける)
 それでは、上から順番に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

 子要素のをどのように並べるかの指定に使います。

stretch(初期値) :  上下に延ばす
flex-start  : 上揃え
center  : 中央揃え
flex-end  : 下揃え
 それでは、実際に指定して見ましょう。
 
 この設定が分かり易いように、要素に高さを設定(3、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

 子要素の順番を指定できるプロパティです。
 
order:順番; 初期値の順番:0
 それでは、表示する順番を、「アプリエイト」、メルマガ登録、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

 個別の子要素に対して位置を設定する場合に使います。

stretch(初期値) :  上下に延ばす
flex-start  : 上揃え
center  : 中央揃え
flex-end  : 下揃え

 ここでは、初期状態が上揃えになっていますので、「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」の方が優先して使われます。

flex-basis: ○○px、○○em、○○%
 子要素の1、3,5番目の幅をそれぞれ、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(初期値:0):○ 初期値:0、○には整数、下図が多いほど広くなる。
 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

 他の要素に対してどの程度縮めるかを指定するのに使います。

flex-shrink(初期値:1): ○○ ○○は数値、0にすると縮まなくなります。
 最初は、子要素全体にwidth:20emと言う大きな値を設定すると、通常は枠からはみ出ますが、flex-shrink(初期値:1に設定されているために、親枠に合うように調節してくれ、各子要素が均等の幅になります。
 
 次に「Home」に「flex-shrink」を2に設定すると、「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などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

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