小規模なプログラム開発にはフレックスレイアウトモードが不可欠

wxflex

WeChatアプレットのFlexレイアウトデモ - 4つの必須かつ一般的に使用されるFlexレイアウトモード

コードライブラリ

githubアドレス: github.com/icindy/wxflex

公式推奨Flexレイアウト

Flexレイアウトは、従来の float レイアウトよりもシンプル、高速、便利です。フレックス レイアウトをマスターすると、WeChat ミニ プログラムを作成するときに wxss のコードを減らすことができ、また、WeChat ミニ プログラム開発のドキュメント要件にも準拠します

このコードには、異なる プロパティ を使用する 4 つの Flex レイアウト メソッドが含まれます。 。
関連する属性を学ぶには、この記事の最後にある学習リファレンスを読むことをお勧めします

サイコロのレイアウト

サイコロのレイアウトは主にいくつかの属性の使用を強調しますdisplay justify-content align-items align-selfetc

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between;
}

.second-pip-2 {
  align-self: flex-end;
}

グリッドレイアウト

主にフレックス属性に依存

.Grid {
  display: flex;
}
.Grid-cell {
  flex: 1;
}

パーセンテージレイアウト

.Grid {
  display: flex;
}

.cell-u-full {
  flex: 0 0 100%;
}

流れるレイアウト

9マスグリッド、滝の流れなどのエフェクトの作成

【関連推奨事項】

1 . WeChatミニプログラムの完全なソースコードダウンロード

2 WeChatミニプログラムストアのソースコードを追跡する

以上が小規模なプログラム開発にはフレックスレイアウトモードが不可欠の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。