レイアウトを組むことが出来るFlexboxについて説明していきます。
Flexbox（フレックスボックス）
Flexboxとは、複雑なレイアウトなどを簡単に組むことが出来ます。
基本的な考え方としては、親要素のコンテナの中に子要素のアイテムを入れて作成していきます。
以下の例は、親要素のコンテナ内に子要素のアイテムを入れた場合です。
子要素のな旅は横並びになります。
CSS
.container{
display:flex;
}
HTML
<div class=”container”>
<div>アイテム①</div>
<div>アイテム②</div>
<div>アイテム③</div>
>/div>
flex-direction
flex-directionは、どの方向に配置していくのか指定出来ます。
横または縦に並べられます。
- row：左から右へ並ぶ
- row-reverse：右から左へ並ぶ
- column：上から下に並ぶ
- column-reverse：下から上に並ぶ
CSS
.container{
display:flex;
flex-direction:row-reverse;
}
HTML
<div class=”container”>
<div>アイテム①</div>
<div>アイテム②</div>
<div>アイテム③</div>
>/div>
flex-wrap
flex-wrapは、1行または複数行に並べるのか指定出来ます。
複数行の場合は、子要素が親要素の幅を超えてしまった場合に折り返して複数行になります。
- nowrap：子要素を折り返しせず、1行に並べる
- wrap：子要素を折り返し、複数行に上から下に並べる
- wrap-reverse：子要素を折り返し、複数行に下から上に並べる
CSS
.container{
display:flex;
flex-wrap:wrap;
}
HTML
<div class=”container”>
<div>アイテム①</div>
<div>アイテム②</div>
<div>アイテム③</div>
>/div>
justify-content
justify-contentは、親要素に空きスペースが存在する場合、子要素を水平方向のどの位置に配置するかを指定出来ます。
- flex-start：行の開始位置から配置。左揃え。
- flex-end：行末から配置。右揃え。
- center：中央揃え
- space-between：最初と最後の子要素を両端に配置。残りの要素は均等に感覚を開けて配置。
- space-around：両端の子要素を含め、均等に間隔を空けて配置
CSS
.container{
display:flex;
justify-content:flex-end;
}
HTML
<div class=”container”>
<div>アイテム①</div>
<div>アイテム②</div>
<div>アイテム③</div>
>/div>
align-items
align-itemsは、親要素に空きスペースが存在する場合、子要素を垂直方向のどの位置に配置するかを指定出来ます。
- stretch：親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
- flex-start：親要素の開始位置から配置。上揃え。
- flex-end：親要素の終点から配置。下揃え。
- center：中央揃え
- baseline：ベースラインで揃える
CSS
.container{
display:flex;
aligin-items:center;
height:100vh;
}
HTML
<div class=”container”>
<div>アイテム①</div>
<div>アイテム②</div>
<div>アイテム③</div>
align-content
align-contentは、子要素が複数行にわたった場合の垂直の揃え方を指定出来ます。
- stretch：親要素の高さに合わせて広げて配置
- flex-start：親要素の開始位置から配置。上揃え。
- flex-end：親要素の終点から配置。下揃え。
- center：中央揃え
- space-betwwn：最初と最後の子要素を上下の端に配置し、残りの要素は均等に感覚を空けて配置
- space-around：上下端にある子要素も含め、均等に感覚を空けて配置
CSS
.container{
display:flex;
flex-warp:wrap;
align-content:space-betwwn;
height:100vh;
}
HTML
<div class=”container”>
<div>アイテム①</div>
<div>アイテム②</div>
<div>アイテム③</div>
コメント