flexbox を使ってみる

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

 レイアウトとしてtable タグを使ってはいけない事になってるんだそうです。
 そんな時はflexbox を使わないといけないんだそうですが、table タグって便利なんで使ってきました。
 で、flexbox に挑戦。
 大きな画像の1/2の画像をタイル状に配置します。
 
んな感じ。
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 以前   その他
スポンサーサイト



Comments 2

There are no comments yet.

さくら  

突然の訪問、失礼いたします。
私はこちら⇒b--n.net
でブログをやっているきみきといいます。
色々なブログをみて勉強させていただいています。
もしよろしかったら相互リンクをお願いできないでしょうか?
「やってもいいよ」という方はコメントを返してくだされば、
私もリンクさせていただきます。
よろしくお願いします^^

2017/11/27 (Mon) 18:25 | 返信を書く |   

hige  

さくらさんへ リンクの件

 マイナーなブログへお越し戴きありがとうございます。
 当方、リンクについては今のところ増やすことは考えておりません。
 誠に申し訳ありませんが、特にまとめサイトには興味がありません。アダルトな記事も多いようですね。
 また、FC2ブログでないサイトへのリダイレクト、ビックリしました。
 ただ、そちらの方でリンクされる分には一向に差し支えありませんのでご随意にしてくださって結構です。

2017/11/27 (Mon) 20:09 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

 お名前とか
 ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます