Simplicityの骨組みをフレキシブルボックスにする part3 ナビゲーション編

Screenshot_from_2015-03-05-11-48-51-300x1441-150x1現在のSimplicityのナビゲーションでPCの画面で見ると画像のように縦に前後のリンクが表示されます。これを1列に表示させるようにするためにはflex-boxはとても便利です。

floatさせたりすると、その位置を色々と考えなくてはいけなくなりますが、何も考えなくても勝手にそろえてくれます。フレキシブルに伸縮するのでもちろんレスポンシブとなります。

CSS的には、

これだけです。

.navigation部のdisplay: -webkit-flexで、表示するブロックをフレキシブルに設定します。
-webkit-justify-content: space-betweenでは、子要素(ここでは.prevと.next)の間にあるスペースを自動的に設定します。先頭と末尾のスペースは詰められます。この先頭と末尾のスペースを少し開けたい場合はspace-aroundを利用します。

.navigation .prevと同 .next部では、ボックスの割合を指定しています。1を設定した場合は50%となります(子要素.prevと.nextで2つあるから)。もし最初の記事の場合.nextはありませんから、.prevは横幅100%となります。

.navigation a 部では、リンクの中にあるテキストと矢印をフレキシブルにするために、やはりflexを指定しています。
-webkit-flex-flow: row nowrapは、横並びにしてnowrapで子要素の横幅が親要素の横幅を超えた時にでも縦並びにならないように設定してあります。wrapを指定すると、矢印とテキストが縦並びになると思います。
-webkit-align-items: centerは縦の中央に配置されるようにしています。上部に配置したい場合は、flex-start、下部の場合はflex-endで指定できます。

Screenshot_from_2015-03-05 12-53-51上記CSSを適用させると、画像のようになります。

元々Simplicityではナビを縦並びにしてあるため、右側の矢印(.next側)がブロックの左側に付いています。これを右側に移動させるのにはjQueryを利用します。

こんな感じです。

若干jQueryに頼る部分(右向き矢印の位置)もありますが、例えば元々のナビゲーションを出力するPHP側で位置を変更してしまえばjQueryは必要ありません。

スポンサーリンク

シェアする

フォローする