微信小プログラムFlexレイアウト用法深入浅出分析

この例では、微信ウィジェットFlexレイアウトの使い方について説明します.皆さんの参考にしてください.具体的には以下の通りです.
Flexレイアウト:Flexible Boxの略で、「フレキシブルレイアウト」を意味し、ボックスモデルに大きな柔軟性を提供します.
使用方法:
1.どのコンテナでもflexレイアウトを使用できます

.box {
  display: flex;
}

2.行内要素はflexレイアウトを使用できます

.box{
  display: inline-flex;
}

3.webkitカーネルのブラウザに-webkit接頭辞を付ける

.box {
  display: -webkit-flex; /* Safari */
  display: flex;
}

外層flexコンテナのプロパティ:
1.flex-directionプロパティ

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row(デフォルト):主軸は水平方向で、始点は左端です.row-reverse:主軸は水平方向で、起点は右端にあります.column:主軸は垂直方向で、始点は上に沿っています.column-reverse:主軸は垂直方向で、起点は下に沿っています.
2.flex-wrapプロパティ

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(デフォルト):改行しません.wrap:改行し、最初の行は上にあります.wrap-reverse:改行し、最初の行は下にあります.
3.flex-flowプロパティ:flex-directionプロパティとflex-wrapプロパティの略記形式で、デフォルト値はrow nowrap

.box {
  flex-flow:  || ;
}

4.justify-contentプロパティ:主軸上のitemの方法を定義する

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start(デフォルト):左揃えflex-end:右揃えcenter:中央space-between:両端揃え、項目間の間隔が等しい.space-around:各項目の両側の間隔が等しい.したがって、プロジェクト間の間隔は、プロジェクトと枠線の間隔の2倍になります.
5.align-itemsプロパティ:交差軸でアイテムをどのようにするかを定義します.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start:交差軸の始点位置合わせ.flex-end:交差軸の終点位置合わせ.センター:交差軸の中点揃え.baseline:プロジェクトの最初の行のテキストのベースラインの位置合わせ.stretch(デフォルト):プロジェクトが高さを設定していない場合、またはautoに設定されている場合、コンテナ全体の高さが満たされます.
6.align-contentプロパティ:複数の軸を定義する方法で、1本の軸だけでは機能しません.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start:交差軸の始点に位置合わせします.flex-end:交差軸の終点に位置合わせします.センター:交差軸の中点に位置合わせします.space-between:交差軸の両端に揃え、軸線間の間隔が平均的に分布します.space-around:各軸線の両側の間隔が等しい.したがって、軸線間の間隔は、軸線と枠線の間隔よりも2倍大きい.stretch(デフォルト):軸が交差軸全体を占めます.
プロジェクトitemのプロパティ
1.orderプロパティ:アイテムの並べ替え順序を定義します.数値が小さいほど前になり、デフォルト値は0、負数は0より前になります.

.item {
  order: ;
}

2.flex-growプロパティ:プロジェクトの拡大率を定義します.デフォルトは0です.つまり、空き領域がある場合も拡大しません.

.item {
  flex-grow: ; /* default 0 */
}

3.flex-shrinkプロパティ:プロジェクトの縮小率を定義します.デフォルトは1です.つまり、スペースが不足するとitemが縮小します.

.item {
  flex-shrink: ; /* default 1 */
}

4.flex-basisプロパティ:余分なスペースを割り当てる前にitemが占める主軸スペース(main size)、デフォルトauto、すなわちitem自体のサイズ

.item {
  flex-basis:  | auto; /* default auto */
}

5.flexプロパティ:flex-grow、flex-shrink、flex-basisの略記、デフォルト値0 1 auto、後の2つのプロパティオプション

.item {
  flex: none | [  ? ||  ]
}

このプロパティには、auto(1 auto)とnone(0 auto)の2つのショートカットがあります.
ブラウザが相関値を推定するため、3つの分離された属性を単独で書くのではなく、この属性を優先的に使用することをお勧めします.
6.align-selfプロパティ:単一のitemが他のitemと異なる方法でalign-itemsプロパティを上書きできるようにする

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

本文で述べたことは、皆さんの微信ウィジェットの開発に役立つことを望んでいます.