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 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ
  2. サーバー環境

    Aws EC2 Postfix + Dovecotメールサーバー 構築記録
  3. プログラミング

    Vue.js 3をWordPress 上で動かしてみた。
  4. Web・デザイン

    Ruby Sass のインストール 開発環境の整備
  5. プログラミング

    画像をポップアップするライトボックス jQuery プラグイン 「lightb…
PAGE TOP