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. プログラミング

    Django Webアプリケーションの構築 Nginxで公開 Mysqlに接続す…
  2. Web・デザイン

    wordpress上でPre要素で ソースコードを行番号付きでエディターのように…
  3. サーバー環境

    Git コマンドライン
  4. Web・デザイン

    列行を一次元に並べて表示する CSS 「FlexBox」 jQuery + Aj…
  5. Web・デザイン

    Illustrator ショートカットデータベース、カテゴリー別絞り込み 、マウ…
PAGE TOP