Web・デザイン

列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Ajax で挙動を確認する。

WordPress で jQuery + Ajax で FlexBoxの挙動を確認します。
いまいち分かりずらいと言うことで確認用のプログラムを作成してみました。
シリーズで色々なパターンを試して見ることにします。
今回ここに display: flex の基本的の要素「justify-content:start」「align-items:stretch」「flex-wrap:wrap」「align-content:flex-start」をそれぞれの関係をサンプルアプリで確認しています。
この書き込み自体も「FlexBox display:flex」を利用してレイアウトしています。
「Ajax」と「アプリケーション」との通信は[json]形式で通信をしています。
サンプルの要素をクリックするとそれぞれの要素の状況を確認しながら配置が確認できます。

実装サンプル

参考サイト
MDN web Doc Flexbox(フレックスボックス)レファレンス

最近の記事

  1. EC-CUBE 4.0 インストール
  1. プログラミング

    HTML特殊文字変換 WordPress Ajax経由で変換ツール
  2. プログラミング

    Google Maps Platform 位置情報取得、緯度経度より住所取得
  3. Web・デザイン

    Illustrator ショートカットデータベース、カテゴリー別絞り込み 、マウ…
  4. プログラミング

    PDOで郵便番号辞書データベース HTMLで一覧表示
  5. 趣味・実用

    vim テキストエディターを快適に使う
PAGE TOP