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

    Macにmysql 8.0.x をインストールする。
  2. Web・デザイン

    ページ上の要素をふるわす CSShake 「CSSアニメーションライブラリー」
  3. プログラミング

    MySQLによる 条件分岐とサブクエリー
  4. サーバー環境

    MAMPのインストール
  5. プログラミング

    Yahoo!天気・災害 RSS一週間の予報 データをパース
PAGE TOP