WordPress で jQuery + Ajax で FlexBoxの挙動を確認します。
いまいち分かりずらいと言うことで確認用のプログラムを作成してみました。
シリーズで色々なパターンを試して見ることにします。
今回ここに display: flex の基本的の要素「justify-content:start」「align-items:stretch」「flex-wrap:wrap」「align-content:flex-start」をそれぞれの関係をサンプルアプリで確認しています。
この書き込み自体も「FlexBox display:flex」を利用してレイアウトしています。
「Ajax」と「アプリケーション」との通信は[json]形式で通信をしています。
サンプルの要素をクリックするとそれぞれの要素の状況を確認しながら配置が確認できます。
実装サンプル
- justify-content:start
- justify-content:center
- justify-content:space-between
- justify-content:space-around
- justify-content:space-evenly
- align-items:stretch
- align-items:center
- align-items:flex-start
- align-items:flex-end
- justify-content:start
- justify-content:center
- justify-content:space-between
- flex-wrap:wrap
- flex-wrap:wrap-reverse
- align-content:flex-start
- align-content:flex-end
- align-content:center
- align-content:space-between
- align-content:space-around
justify-content:start
align-items:center
align-items:center
