WeChatウィジェットCSSのFlexレイアウト

転載:https://blog.csdn.net/u012927188/article/details/83040156
 
最初は小さなプログラムの开発を学ぶ初心者はきっとインタフェースのレイアウトに困っていると信じて、どのようにレイアウトして、どのように位置を并べて、その原因はCSSスタイルの属性を理解していないので、今日コード君はCSSについての教程を书いて、みんなに普及させるつもりです.
CSSレイアウトといえば、まずFLexレイアウトについて説明します.これは万能鍵と言えます.どんな複雑なレイアウトに遭遇しても、Flexレイアウトで解決できます.Flex属性を理解しやすいように、FLexの属性を一歩一歩解析し、効果図を添付します.
 
基本概念はFlexレイアウトの要素を採用し、Flexコンテナ(flex container)と呼ばれ、略称は「コンテナ」である.すべてのサブエレメントが自動的にコンテナメンバーとなり、Flexプロジェクト(flex item)、略称「プロジェクト」と呼ばれます.
Flexコンテナのプロパティ.Flexには全部で6つのプロパティがあります.
flex-direction:配列方向を設定flex-wrap:内容が1行いっぱい、改行するかどうかflex-flow flex-direction:属性とflex-wrap属性の略記形式justify-content:左右揃えalign-items:上下揃えalign-content:複数行上下揃え
一、flex-direction属性:flex-directionはitemの中に並ぶ方向を決定し、次の4つの属性値:row(デフォルト):横方向に並べ替え、左からitemを並べ替える.row-reverse:横に並べ替え、右からitemを並べ替えます.column:縦に並べ、上部からitemを並べます.column-reverse:縦に並べ、底からitemを並べます.二、flex-wrap属性:デフォルトでは、項目はすべて1行に並んで改行しない.flex-wrapには3つの属性値がある:nowrap(デフォルト)改行しないwrap最初の行がいっぱいになったら、wrap-reverse改行し、最初の行は下の3、flex-flow属性:
flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティの略記形式です.ここでは使用をお勧めしません.紹介しません.
四、justify-content属性:justify-contentはitemの左右の位置合わせを定義するために使用され、以下の5種類がある.
flex-start(デフォルト):左揃えflex-end:右揃えcenter:中央space-between:等距離揃え、両端揃え、item間の間隔が等しい.space-around:各itemの両側の間隔が等しい.したがって、item間の間隔はitemと枠線の間隔より2倍大きい.五、align-itemsプロパティ:align-itemsはitemの上下揃えを定義するために使用され、flex-start:flex-endを上下揃えする5つのflex-startもあります.センター:中央に位置します.baseline:itemの最初の行のテキストのベースラインの位置合わせ.stretch(デフォルト):itemが高さを設定していない場合、またはautoに設定している場合、コンテナ全体の高さが満たされます.六、align-content属性:align-contentは複数行の整列方式であり、1行しかない場合、flex-start:上向きの整列は機能しません.flex-end:下揃え.センター:中央に位置します.space-between:等距離整列、両端整列、item間の間隔が等しい.space-around:各itemの両側の間隔が等しい.したがって、item間の間隔はitemと枠線の間隔より2倍大きい.stretch(デフォルト):すべてのitemがコンテナ全体を占めています.七、拡張:
コンテナ内のitemをスケールで区切るにはflex-growプロパティを使用し、そのitemが1行に占める割合を割り当てることができます.

Flex属性実戦

イニシャルコード

class="container">
   class="item">
      v1
    
    class="item">
      v2
    
    class="item">
      v3
    

/**index.wxss**/
.container {
  height: 1000rpx;
  width: 100%;
  background-color: rgb(13, 134, 78);
  display: flex;
}

.item {
  height: 100rpx;
  width: 100rpx;
  border: 5rpx solid #fff;
}

image.png
プロパティの効果図を変更した上で、残りの2つのプロパティはプレゼンテーションされません.次にjustify-contentの左右の位置合わせを試してみましょう.等間隔の位置合わせを実現しましょう.

/**index.wxss**/
.container {
height: 1000rpx;
width: 100%;
background-color: rgb(13, 134, 78);
display: flex;

/*       */
flex-direction: row;
justify-content: space-between;
}

image.png
OK、次は上下揃えです.align-itemsという中には左右揃えとは違うものがあります.内容文字によってbaselineを揃えます.効果がどのようなものなのか見てみましょう.コントラストのために、文字の高さを設定しました.

/**index.wxss**/
.container {
  height: 1000rpx;
  width: 100%;
  background-color: rgb(13, 134, 78);
  display: flex;

  /*       */
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}

.item {
  height: 100rpx;
  width: 100rpx;
  border: 5rpx solid #fff;
}

.item2 {
  height: 100rpx;
  width: 100rpx;
  border: 5rpx solid #fff;
  padding-top: 20rpx;
}

image.png
見たでしょう、この属性は1行目の文字に基づいてベースラインに揃えられています.2番目のview字の位置は他とは違うので、全体的に上に移動しました.最後に、以下の等比でitemを分割します.使用する属性はflex-growです.この属性はitemに設定する必要があります.

/**index.wxss**/
.container {
  height: 1000rpx;
  width: 100%;
  background-color: rgb(13, 134, 78);
  display: flex;

  /*       */
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}

.item {
  height: 100rpx;
  width: 100rpx;
  border: 5rpx solid #fff;
  /*  1*/
  flex-grow: 1;
}

.item2 {
  height: 100rpx;
  width: 100rpx;
  border: 5rpx solid #fff;
  /*  1*/
  flex-grow: 1;
}

まとめ

はい、これらはFlexのすべての属性で、最後に読者に教えて、文章だけを見ないで、必ず教程について、実戦に行って、このようにしてこそ、属性に対して徹底的に理解することができて、もしあなたがこれらを掌握するならば、市販の小さなプログラムの基礎の配置を信じて、あなたはすべて実現することができます.