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. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. Web・デザイン

    CSS3 アニメーションライブラリ animate.cssについて学ぶ
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備

    サーバー環境

    ubuntu 20.04 nginx php mysql Webサーバー環境…
  3. プログラミング

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

    美しい文字 「Google Web Fonts」「Adobe Web Font…
  5. Web・デザイン

    wordpress上でPre要素で ソースコードを行番号付きでエディターのように…
PAGE TOP