day03组件

1、text   编写文本信息，等价于span

2、view 等价于div

3、image

============================wxml=======================

实例一

    
    
    
    

实例二

  
    
    精品
  
   
    
    精品
  
   
    
    精品
  
   
    
    精品
  

======================xcss================================

/* pages/index/index.wxss */

.c1{

  color:red

}

image{

  width:100rpx;

  height:100rpx

}

.menu1{

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}

.menu2{

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}

.menu{

  display: flex;

  /*规定主轴的方向 row row-reverse也是行但是反向显示*/

  /*规定主轴的方向 column*/

  flex-direction: row;

  /*规定元素在主轴方向上的显示方式*/

  justify-content: space-around;

    /*规定元素在副轴方向上的显示方式

      align-items: ;

      一般副轴不用排

    */

}

.item{

   display: flex;

   flex-direction: column;

   align-items: center;

}

4、flex布局

一种通用性的布局方式，记着4个布局样式就可以了

display:flex    使用flex布局

flex-direction :row/column  规定主轴的布局方式

justify-content:flex-start/flex-end/space-around/space-between元素在主轴方向的布局

align-items:flex-start/flex-end/space-around/space-between元素在副轴上的布局方式

 

5、样式：

    px和rpx：

在官网上，需要看的就是全局和组件