DD_log / HTML,CSS,Javascript,Wordpressの解説や雑感サイト

display:flex（要素の並列レイアウト）

CSSので要素を並列にレイアウトするためには、displayプロパティの値にflexを指定します。

HTMLの多くの要素は初期値で上下に並びます。
そういった要素を左右に並べたい場合に、display:flexを利用します。
また横並びにしたい要素に直接指定するのではなく、指定したい要素の親要素に指定します。
（例：複数のli要素を横並びにしたい場合、親要素のul要素に指定する）

htmlの記述：

 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="item.html">Item</a></li>
 <li><a href="About.html">About</a></li>
 <li><a href="Contact.html">Contact</a></li>
 </ul>

cssの記述

ul{
 width: 800px;
 background: #ff0;
 display: flex;
 list-style: none
 }

デモ

justify-content: キーワード

レイアウトしたコンテンツの揃え位置を以下のキーワードで指定することができる

• flex-start フレックスでレイアウトされたコンテンツの揃え位置を起点に指定。（通常、左端に配置 ）
• flex-end フレックスでレイアウトされたコンテンツの揃え位置を終点に指定。（通常、右端に配置 ）
• center フレックスコンテナの主軸の幅の中央揃え。通常、左右中央に配置。
• space-between フレックスコンテナの主軸の幅に対し、余白を持った等間隔配置。
• space-around フレックスコンテナの主軸の幅に対し、余白を持った等間隔配置。起点や終点の間にも間隔が発生する。

*floatで横並びにした際に必要となるclearの記述が不要、また複数float直後の要素のmargin-topが有効（floatの場合無効）

cssの記述

ul{
 width: 800px;
 background: #ff0;
 display: flex;
 justify-content: space-between;
 list-style: none
 }

デモ

flex-direction: キーワード

並列に配置する子要素を、どの方向に配置していくかを指定することができる。

• row 子要素を左から右に配置。
• row-reverse 子要素を右から左に配置。
• column 子要素を上から下に配置。
• column-reverse 子要素を下から上に配置。

cssの記述

ul{
 width: 800px;
 background: #ff0;
 display: flex;
 justify-content: space-between;
 flex-direction: row-reverse;
 list-style: none
 }

デモ

align-items: キーワード

垂直軸方向におけるコンテンツの揃え位置を指定。（垂直方向におけるjustify-contentの様な役割）

• center 　項目を中央付近に配置
• flex-start 　フレックス項目を開始位置に配置
• flex-end 　フレックス項目を終了位置に配置

cssの記述

ul{
 width: 800px;
 height: 200px;
 background: #ff0;
 display: flex;
 justify-content: space-between;
 flex-direction: row-reverse;
 align-items: center;
 list-style: none
 }

デモ

flex-wrap: キーワード

flex でレイアウトしたコンテンツを一行に配置するか、複数行に折り返して配置するかを指定することができる。

• nowrap　初期値、折り返しなし
• wrap　コンテンツが親要素の幅を超えた場合折り返し
• wrap-reverse　コンテンツが親要素の幅を超えた場合折り返し、行の並び順が入れ替わる

htmlの記述

<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="item.html">Item</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="contact.html">Contact</a></li>
 <li><a href="special.html">Special</a></li>
 <li><a href="special2.html">Special2</a></li>
 </ul>

cssの記述

*{
 margin: 0;
 padding: 0
 }

 ul{
 width: 800px;
 height: 200px;
 background: #ff0;
 display: flex;
 justify-content: space-between;
 flex-direction: row-reverse;
 flex-wrap:wrap
 align-items: center;
 list-style: none
 }

 li{
 width: 200px;
 text-align: center;
 }

デモ