WordPress Popular PostsをFlexbox表示してみる
この記事は約 4 分で読めます。
「 WordPress Popular Postsを
grid表示してみる 」という記事では
floatプロパティでサムネイルを
横並びに表示していますが、
今回は
Flexible Box Layoutを
試してみたいと思います。
Flexboxとは
Flexbox(Flexible Box Layout Module)とは
親要素に簡単な指示を記述することで、
複数の子要素について
さまざまなレイアウト調整ができる
CSS3の新しいレイアウトモジュールです。
結果を表示
見た目はfloatを使ったのと
変わらないのですが、
flex-direction プロパティを
row-reverse にして
サムネイルを右から左へ配置しています。
HTML Markup
HTMLマークアップは
以下を参照の事。
The HTML Markup
Flexboxのスタイル
.wpp-grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
margin: auto;
padding: 0;
}
.wpp-grid li {
position: relative;
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 33.333%;
}
.wpp-grid li .wpp-thumbnail {
display: block;
width: 100%;
height: auto;
border: 0;
}
.wpp-grid li .wpp-grid-overlay {
position: absolute;
display: block;
top: 100%;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: all .4s;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.8);
}
.wpp-grid li:hover .wpp-grid-overlay {
top: 0;
opacity: 1;
}
.wpp-grid li a.wpp-post-title {
color: #ff0000;
}
.wpp-grid li .wpp-post-title {
position: absolute;
display: block;
top: 0;
left: 0;
opacity: 0;
padding: 0 15px;
width: 100%;
line-height: 1em;
text-align: center;
transition: all .4s;
box-sizing: border-box;
}
.wpp-grid li:hover .wpp-post-title {
top: 50%;
opacity: 1;
transform: translateY(-50%);
}
.wpp-grid li .wpp-post-title:hover {
color: #ffffff;
}
@media(max-width:768px) {
.wpp-grid li {
width: 50%;
}
}
@media(max-width:480px) {
.wpp-grid li {
width: 90%;
}
}
Reference
貴重なお時間を割き、最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
フレックスボックスですか。
初めて知りました。^±^
レイアウトみたいなものでしょうか。
難しそうです。^±^
さて、今回は、もう一つのリンク先をURLにしてみました。
入りやすい方からどうぞです。^±^ノ
てくっぺさん おはようございます。
コメントありがとうございます。
そうですね。
レイアウトです。
もう一つのリンク先?ですか?
ありがとうございます。
訪ねてみます。