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. サーバー環境

    無料のSSL証明書 Let’s Encrypt 試してみました。
  2. プログラミング

    Emmet CheatSheet 省略記法まとめ
  3. Raspberry PI

    raspberryPi 4B CenotOS7 をインストール LAMP環境を…
  4. プログラミング

    PDOで郵便番号辞書データベース構築の記録
  5. プログラミング

    WordPressで jqueryプラグイン Qrcodeを表示する
PAGE TOP