애플릿: 필기 (1)

classic.wxml

"container">
  "chunk color1">
    1
  
  "chunk color2">
    2
  
  "chunk color3">
    3
  

classic.wxss

/* pages/classic/classic.wxss */

.container{
     
  display: flex;
  /* row column row-reverse column-reverse */
  flex-direction: row;
  /* view width:100%  height:    */
  height: 200px;
  background-color: #9999;
  justify-content: center;  /*           */
  /* center:    
    space-between:    ，   、  、     
    space-around:    
  */
  /*     reverse，    start,   end;    start,   end */
  /*        
     flex-direction: column; ，       ，        。
    justify-content           ，align-items            
  */
  align-items: flex-start;
  /* stretch:        
    baseline:                 。
  */
  flex-wrap: wrap;
  /*    */
}

.chunk{
     
  /*      */
  /* display: inline-block; */
  width: 150px;
  height: 100px;
  background-color: brown;
}

/* flex flexible box      */
/* flex container --> flex item */

.color1{
     
  background-color: cadetblue;
}

.color2{
     
  background-color: cornsilk;
}

.color3{
     
  background-color: darkcyan;
}