flexbox を使ってみる
レイアウトとしてtable タグを使ってはいけない事になってるんだそうです。
そんな時はflexbox を使わないといけないんだそうですが、table タグって便利なんで使ってきました。
で、flexbox に挑戦。
大きな画像の1/2の画像をタイル状に配置します。
そんな時はflexbox を使わないといけないんだそうですが、table タグって便利なんで使ってきました。
で、flexbox に挑戦。
大きな画像の1/2の画像をタイル状に配置します。
んな感じ。
HTMLは下記のような感じにしました。
次にCSSです。
(注)下記ブラウザは非対応
IEの10以前
Android 4.3以前
ios 7.0 以前 その他
HTMLは下記のような感じにしました。
<a href="https://・・・・・0" target="_blank">
<img class="img_nb_flb" src="https://・・・・・0" alt="" style="width: 100%; height: auto;">
</a>
<div class="flexbox">
<a href="https://・・・・・1" target="_blank">
<img src="https://・・・・・1" alt="" style="width: 100%; height: auto;">
</a>
<a href="https://・・・・・2" target="_blank">
<img src="https://・・・・・2" alt="" style="width: 100%; height: auto;">
</a>
</div>
次にCSSです。
.img_nb_flb {
max-width: 100%;
height: auto;
margin: 6px auto;
padding: 0 3px;
border: none;
vertical-align: bottom;
}
/* flexbox img tiles ---------------- */
.flexbox {
display: flex;
align-items: center;
}
.flexbox img {
max-width: 100%;
height: auto;
margin: 3px auto;
padding: 0 3px;
border: none;
vertical-align: bottom;
}
table タグを使うより簡単になりました。(注)下記ブラウザは非対応
IEの10以前
Android 4.3以前
ios 7.0 以前 その他
スポンサーサイト