위 챗 애플 릿 flex 레이아웃 상세 설명

사실 신축성 있 는 포석 이에 요.
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html https://github.com/icindy/wxflex 위의 링크 를 옮 겨 싣 고 Flex 레이아웃 의 요 소 를 Flex 용기 (flex container) 라 고 부 르 며 '용기' 라 고 부 릅 니 다.모든 하위 요 소 는 자동 으로 용기 구성원 이 되 어 Flex 프로젝트 (flex item) 라 고 부 르 며 '프로젝트' 라 고 부른다.
아래 6 개의 속성 을 용기 에 설정 합 니 다.

  ● flex-direction
flex-direction         （        ）。
  ● row（   ）：       ，     。
  ● row-reverse：       ，     。
  ● column：       ，     。
  ● column-reverse：       ，     。

  ● flex-wrap
     ，        （  "  "） 。flex-wrap    ，         ，    。

（1）nowrap（  ）：   。
（2）wrap：  ，      。
（3）wrap-reverse：  ，      。

  ● flex-flow
flex-flow   flex-direction   flex-wrap       ，    row nowrap。
.box {
  flex-flow:  || ;
}

  ● justify-content
justify-content                。
  ● flex-start（   ）：   
  ● flex-end：   
  ● center：   
  ● space-between：    ，          。
  ● space-around：           。  ，                   。

  ● align-items
align-items               。
  ● flex-start：        。
  ● flex-end：        。
  ● center：        。
  ● baseline:              。
  ● stretch（   ）：            auto，          。

  ● align-content
align-content              。          ，       。

  ● flex-start：         。
  ● flex-end：         。
  ● center：         。
  ● space-between：        ，           。
  ● space-around：            。  ，                   。
  ● stretch（   ）：         。

아래 6 개의 속성 을 항목 에 설정 합 니 다.

  ● order
order           。    ，     ，   0。

  ● flex-grow
flex-grow           ，   0，         ，    。
       flex-grow    1，          （     ）。       flex-grow   2，      1，                  。
  ● flex-shrink
flex-shrink            ，   1，       ，      。
      flex-shrink    1，      ，       。       flex-shrink   0，      1，      ，     。

  ● flex-basis
flex-basis              ，         （main size）。         ，           。      auto，        。
      width height      （  350px），          。

  ● flex
flex   flex-grow, flex-shrink   flex-basis   ，    0 1 auto。       。
         ：auto (1 1 auto)   none (0 0 auto)。
          ，             ，           。

  ● align-self
align-self                      ，   align-items  。    auto，        align-items  ，       ，    stretch。
      6  ，  auto，    align-items      。