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:

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

你可能感兴趣的:(day03组件)