小程序 flex布局的学习

作为一名自学android开发的工程师,在反身开始学习小程序开发的时候,就是因为页面布局总是排版不好.丑陋的样子,烦琐的css代码,频繁试错也没搞懂的 css属性的意思,真是搞的头昏脑胀还每个结果. 曾因为这个数次放弃.

但是,为了项目开发的需要,微信巨大的人口吸引力以及小程序便捷的传播特性,还是吸引我奔向小程序---->这是不能放弃的一个阵地,它关系者项目生死存亡.

闲话不多说,直接上内容.

这里要非常感谢 承香墨影 的一片<<写给 Android 开发的小程序布局指南，Flex 布局！>> , 

文章地址是:https://www.cnblogs.com/plokmju/p/wechat_flex.html.

这是偶然 更具"android 小程序"关键字 ,在百度搜索到的

小程序的wxml代码如下:

<view>
  <text>flex的使用</text>
  <text>仅需要将display设置成flex即可</text>
  <text> 新手需要关注display的两个参数是:flex与block</text>
  <text>下面是两个参数的区别</text>
</view>
<view>display:block(默认值)</view>
<view class='displaystyle'>
  <view class='size viewstyle1'>
  </view>
  <view class='size viewstyle2'>
  </view>
  <view class='size viewstyle3'>
  </view>
</view>

<view>display:flex</view>
<view class='displaystyle_flex'>
  <view class='size viewstyle1'></view>
  <view class='size viewstyle2'></view>
  <view class='size viewstyle3'></view>
</view>

<view>
  flex布局中,天然存在两个方向:
  <view>1 主轴:水平轴-->从左到右 </view>
  <view>2 交轴:竖轴--->从上到下</view>
  <view>我们可以通过 flex-direction 属性来改变这种默认的 定义的情况</view>
</view>

<view>等同于移动app中属性定义类似, flex的一些属性 是作用在父容器上的, 而另一些属性是 作用在其 子元素上的,下面是详细介绍:
</view>

<view class='h2'>flex中,作用在父容器上的一些属性</view>
<view class='items'>
  <view class='h3'>1 flex-direction: 改变容器主轴方向的 </view>
  <view class='p'>flex-direction 除去 row 及column概念外,还有 start及end的概念,合在一起共有四个 属性值</view>
  <view>---flex-direction:row-----</view>
  <view class='strong'>flex-direction:row :主轴水平方向,起始点在 左边(这个是默认情况)</view>
  <view class='strong'>css描述内容:display:flex; flex-direction:row</view>
  <view class='direction_row'>
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>
  <!-- row-reverse -->
  <view>---flex-direction:row-reverse-----</view>
  <view class='strong'>flex-direction:row-reverse:主轴水平方向(或者主轴为 水平状态),起始点在右边</view>
  <view class='strong'>css描述内容:display:flex; flex-direction:row-reverse</view>
  <view class='direction-row-reverse'>
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>

  <!-- column -->
  <view>---flex-direction:column-----</view>
  <view class='strong'>flex-direction:column:主轴为垂直方向(或者说为竖直状态),起始点为上部(顶部)</view>
  <view class='strong'>css描述内容:display:flex; flex-direction:column</view>
  <view class='direction-column'>
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>
  <!-- column-reverse -->
  <view>---flex-direction:column-reverse-----</view>
  <view class='strong'>flex-direction:column-reverse:主轴为垂直方向(或者说为竖直状态),起始点为下部(底部)</view>
  <view class='strong'>css描述内容:display:flex; flex-direction:column-reverse</view>
  <view class='direction-column-reverse'>
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>
</view>

<view class='items'>
  <view class='h3'> 2 flex-warp:属性用来确定，父容器内，当单行已经无法包容所有子元素之后，如何换行</view>
  <view class="p">flex-wrap 有三个属性值,分别是 nowrap|wrap|wrap-reverse </view>
  <!-- flex-wrap:nowrap -->
  <view>---flex-wrap:nowrap-----</view>
  <view class='strong'>flex-wrap:nowrap</view>
  <view class='strong'>css描述内容:display:flex;flex-wrap:nowrap; </view>
  <view class='strong'>它最终会根据你设置的子元素的宽度，横向的等比进行缩放，让它可以在当行内显示的下。</view>
  <view class="flex-nowrap">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>

  <!-- flex-wrap:wrap -->
  <view>---flex-wrap:wrap-----</view>
  <view class='strong'>flex-wrap:wrap</view>
  <view class='strong'>css描述内容:display:flex;flex-wrap:wrap; </view>
  <view class="flex-wrap">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>
  <!-- flex-wrap:wrap -->
  <view>---flex-wrap:wrap-reverse----</view>
  <view class='strong'>flex-wrap:wrap-reverse</view>
  <view class='strong'>超出单行的时候，沿着底部翻转方向，自然换行。</view>
  <view class='strong'>css描述内容:display:flex;flex-wrap:wrap-reverse; </view>
  <view class="flex-wrap-reverse">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>
</view>

<view class='items'>
  <view class='h3'> 3 flex-flow:flex-direction 与flex-wrap两个属性的组合简写形式</view>
  <view>这里 是个合集,可以省略了</view>
</view>

<view class='items'>
  <view class='h3'> 4 justify-content:子元素在主轴方向上的对齐方式</view>
  <view class='p'>justify-content有五个属性值 flex-start|flex-end|center|space-between|space-around</view>
  <!-- justify-content:flex-start -->
  <view>---justify-content:flex-start-----</view>
  <view class='strong'>justify-content:flex-start(默认值,左对齐)</view>
  <view class='strong'>css描述内容:display:flex;justify-content:flex-start; </view>
  <view class="justify-content-flex-start">
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>

  <!-- justify-content:flex-end -->
  <view>---justify-content:flex-end-----</view>
  <view class='strong'>justify-content:flex-end(右对齐)</view>
  <view class='strong'>css描述内容:display:flex;justify-content:flex-end; </view>
  <view class="justify-content-flex-end">
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>

  <!-- justify-content:center -->
  <view>---justify-content:center-----</view>
  <view class='strong'>justify-content:center</view>
  <view class='strong'>css描述内容:display:flex;justify-content:center; </view>
  <view class="justify-content-center">
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>

  <!-- justify-content:space-around -->
  <view>---justify-content:sapce-around-----</view>
  <view class='strong'>justify-content:space-around</view>
  <view class='strong'>css描述内容:display:flex;justify-content:space-around; </view>
  <view class="justify-content-space-around">
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>



  <!-- justify-content:space-between -->
  <view>---justify-content:sapce-between-----</view>
  <view class='strong'>justify-content:space-between</view>
  <view class='strong'>css描述内容:display:flex;justify-content:space-between; </view>
  <view class='strong'>可以看到 space-around 是会保留左右的边距，感觉就像是为每个元素都增加了一个左右的 margin 属性，而 space-between 则只在子元素之间存在距离。</view>
  <view class="justify-content-space-between">
    <view class='size viewstyle1'>1</view>
    <view class='size viewstyle2'>2</view>
    <view class='size viewstyle3'>3</view>
  </view>
</view>

<view class='items'>
  <view class='h3'> 5 align-items:定义其父元素内子元素在交叉轴上的对其方式</view>
  <view class='p'>它存在五个可以选择的参数值 flex-start|flex-end|center|baseline|stretch </view>
  <!-- align-items:flex-start -->
  <view>---align-items:flex-start (这是个默认值)-----</view>
  <view class='strong'>align-items:flex-start 交叉轴(竖轴的起点对齐,其实就是顶部对齐)的起点对齐</view>
  <view class='strong'>css描述内容:display:flex;align-items:flex-start; </view>
  <view class="align-items-flex-start">
    <view class='size-align-items-A viewstyle1'>1</view>
    <view class='size-align-items-B viewstyle2'>2</view>
    <view class='size-align-items-C viewstyle3'>3</view>
  </view>

  <!-- align-items:flex-end -->
  <view>---align-items:flex-end -----</view>
  <view class='strong'>align-items:flex-end 交叉轴的终点对齐,其实就是 '底部对齐'</view>
  <view class='strong'>css描述内容:display:flex;align-items:flex-end; </view>
  <view class="align-items-flex-end">
    <view class='size-align-items-A viewstyle1'>1</view>
    <view class='size-align-items-B viewstyle2'>2</view>
    <view class='size-align-items-C viewstyle3'>3</view>
  </view>


  <!-- align-items:center -->
  <view>---align-items:center -----</view>
  <view class='strong'>align-items:center 在交叉轴方向上居中,其实就是 '上下居中'</view>
  <view class='strong'>css描述内容:display:flex;align-items:center; </view>
  <view class="align-items-center">
    <view class='size-align-items-A viewstyle1'>1</view>
    <view class='size-align-items-B viewstyle2'>2</view>
    <view class='size-align-items-C viewstyle3'>3</view>
  </view>

  <!-- align-items:baseline (最原始的状态) -->
  <view>---align-items:baseline -----</view>
  <view class='strong'>align-items:baseline 子元素的第一个元素，内容基线对齐</view>
  <!-- 问题 -->
  <view class='strong'>现在的关键性问题是:子元素的内容基线在哪里,如果定义它以及如何控制它?</view>
  <view class='strong'>css描述内容:display:flex;align-items:baseline; </view>
  <view class="align-items-baseline background">
    <view class='size-align-items-A viewstyle1'>1</view>
    <view class='size-align-items-B viewstyle2'>2</view>
    <view class='size-align-items-C viewstyle3'>3</view>
  </view>


  <!-- align-items:baseline  baseline通过第一个子元素的padding来影响-->
  <view>---align-items:baseline/ baseline通过第一个子元素的padding来影响-----</view>
  <view class='strong'>align-items:baseline 子元素的第一个元素，内容基线对齐</view>
  <!-- 问题 -->
  <view class='strong'>现在的关键性问题是:子元素的内容基线在哪里,如果定义它以及如何控制它?</view>
  <view class='strong'>css描述内容:display:flex;align-items:baseline; </view>
  <view class="align-items-baseline background">
    <view class='size-align-items-A viewstyle1 baselinecontroller-padding'>1</view>
    <view class='size-align-items-B viewstyle2'>2</view>
    <view class='size-align-items-C viewstyle3'>3</view>
  </view>

  <!-- align-items:baseline  baseline通过子元素的margin来影响-->
  <view>---align-items:baseline/ baseline通过子元素的margin来影响 -----</view>
  <view class='strong'>align-items:baseline 子元素的第一个元素，内容基线对齐</view>
  <!-- 问题 -->
  <view class='strong'>现在的关键性问题是:子元素的内容基线在哪里,如果定义它以及如何控制它?</view>
  <view class='strong'>css描述内容:display:flex;align-items:baseline; </view>
  <view class="align-items-baseline background">
    <view class='size-align-items-A viewstyle1 baselinecontroller-margin'>1</view>
    <view class='size-align-items-B viewstyle2'>2</view>
    <view class='size-align-items-C viewstyle3'>3</view>
  </view>

  <!-- align-items:baseline  baseline通过 子元素内部 内容(数字 1)的属性来影响-->
  <view>---align-items:baseline/ baseline通过 子元素内部 内容(数字 1)的属性来影响 -----</view>
  <view class='strong'>align-items:baseline 子元素的第一个元素，内容基线对齐</view>
  <!-- 问题 -->
  <view class='strong'>现在的关键性问题是:子元素的内容基线在哪里,如果定义它以及如何控制它?</view>
  <view class='strong'>css描述内容:display:flex;align-items:baseline; </view>
  <view class="align-items-baseline background">
    <view class='size-align-items-A viewstyle1 baselinecontroller'>
      <view class='.baselinecontroller-content borderstyle'>1</view>
    </view>
    <view class='size-align-items-B viewstyle2'>2</view>
    <view class='size-align-items-C viewstyle3'>3</view>
  </view>

  <view>---align-items:stretch------</view>
  <view class='strong'>align-items:stretch 默认参数，会在交叉轴上铺满父布局</view>
  <!-- 问题 -->
  <view class='strong'>注意 align-items:stretch 和前面我们的属性描述是不符合的，主要原因是它有两个限制。</view>
  <view class='strong'>1 父容器，必须限定高度。</view>
  <view class='strong'>2 子元素，必须没有指定高度，宽还是高，就取决于交叉轴的方向。</view>
  <view class='strong'>下面根据上面的条件来 进行一次演示</view>
  <view class='strong'>css描述内容:display:flex;align-items:stretch; </view>
  <view class="align-items-stretch fatherstyle">
    <view class='size-align-items-stretch-A viewstyle1'>1</view>
    <view class='size-align-items-stretch-B viewstyle2'>2</view>
    <view class='size-align-items-stretch-C viewstyle3'>3</view>
  </view>
</view>

<view class='items'>
  <view class='h3'> 6 align-content 多根轴线的对齐方式 </view>
  <view class='strong'>align-content 属性指定交叉轴上，元素的对齐方式 </view>
  <view class='p'>align-content 有六个可选的属性：</view>
  <view class='p'>stretch：默认值，拉伸占满交叉轴，和 align-items 限制类似</view>
  <view class='p'>flex-start：与交叉轴起点对齐。</view>
  <view class='p'>flex-end：与交叉轴终点对齐</view>
  <view class='p'>center：以交叉轴居中。</view>
  <view class='p'>space-between：与交叉轴两端对齐，并且子元素保持间距相等。</view>
  <view class='p'>space-around：在交叉轴方向，子元素与边距，均保持相同距离。</view>

  <!-- align-content:flex-start-->
  <view>---align-content:flex-start/与交叉轴起点对齐-----</view>
  <view class='strong'>align-content:flex-start/与交叉轴起点对齐</view>
  <!-- 问题 -->
  <view class='strong'>css描述内容:display:flex;flex-warp:wrap;align-content:flex-start; </view>
  <view class="align-content-flex-start align-content-father-box-style">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>

  <!-- align-content:flex-end-->
  <view>---align-content:flex-end/与交叉轴终点对齐-----</view>
  <view class='strong'>align-content:flex-start/与交叉轴终点对齐</view>
  <!-- 问题 -->
  <view class='strong'>css描述内容:display:flex;flex-warp:wrap;align-content:flex-end; </view>
  <view class="align-content-flex-end align-content-father-box-style">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>

  <!-- align-content:center-->
  <view>---align-content:center/在交叉轴方向上居中-----</view>
  <view class='strong'>align-content:center/在交叉轴方向上居中</view>
  <!-- 问题 -->
  <view class='strong'>css描述内容:display:flex;flex-warp:wrap;align-content:center; </view>
  <view class="align-content-center align-content-father-box-style">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>

  <!-- align-content:space-between-->
  <view>---align-content:space-between/与交叉轴两端对齐，并且子元素保持间距相等。-----</view>
  <view class='strong'>align-content:space-between/与交叉轴两端对齐，并且子元素保持间距相等。</view>
  <!-- 问题 -->
  <view class='strong'>css描述内容:display:flex;flex-warp:wrap;align-content:space-between; </view>
  <view class="align-content-sapce-between align-content-father-box-style">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>

 <!-- align-content:space-around-->
  <view>---align-content:space-around/在交叉轴方向，子元素与边距，均保持相同距离。-----</view>
  <view class='strong'>align-content:space-around/在交叉轴方向，子元素与边距，均保持相同距离。</view>
  <!-- 问题 -->
  <view class='strong'>css描述内容:display:flex;flex-warp:wrap;align-content:space-around; </view>
  <view class="align-content-sapce-around align-content-father-box-style">
    <view class='size-wrapA viewstyle1'>1</view>
    <view class='size-wrapB viewstyle2'>2</view>
    <view class='size-wrapC viewstyle3'>3</view>
  </view>
</view>

<!-- 基础知识就学习到这里吧 -->

小程序的wxss代码如下:

/* pages/public/public.wxss */

/* 定义总的样式行为 */
.displaystyle{
  display: block
}
/* 细分样式定义 */
.size{
  height: 100px;
   width:100px;
  /* 在block的作用下,这个宽度默认是100%,自动 占满一整行 */
  /* width: 100px */
  
  /* 如下定义了左右居中的情况 */
  /* 在display:block 作用下,内部元素显示 左右居中 */
  /* 在display: flex 作用下,内部元素 显示 各个之间均布  */
  /* margin: auto */
  /* 如果没有margin:auto 属性,则 统一靠左显示紧密挨近显示 */
}
.viewstyle1{
  background-color: gold
}
.viewstyle2{
  background-color: red;
}
.viewstyle3{
  background-color: green;
}

/* 下面显示flex的左右 */
/* 定义总的样式 */
.displaystyle_flex{
  /* 只定义了这一个属性 */
  display: flex
}

/* 定义详细的属性 */
.flexstyle1{
   background-color: gold
}

/* flex属性的学习 */
.items{
  margin-top: 20px;
  margin-bottom: 20px;
}
.h2{
  font-size:18pt;
  margin-top: 15px;
  margin-bottom: 15px;
}

.h3{
  font-size: 16pt;
  margin-top: 5px;
  margin-bottom: 5px;

}
.p{
  font-size: 10pt;
  font-family: "楷体";
  /* padding: 0px,5px,0,5px; */
  padding-left: 10px;
  padding-right: 10px;
}
.direction_row{
  display: flex;
  flex-direction: row;
}
.strong{
  padding-left: 10px;
  font-family: "黑体";
}
.direction-row-reverse{
  display: flex;
  flex-direction: row-reverse;
}

.direction-column{
  display: flex;
  flex-direction: column;
}

.direction-column-reverse{
  display: flex;
  flex-direction: column-reverse;
}

/* flex-wrap 属性值的学习 */
.size-wrapA{
  width: 100px;
  height: 100px
}
.size-wrapB{
  width: 200px;
  height: 100px
}
.size-wrapC{
  width: 350px;
  height: 100px
}

.flex-nowrap{
  display: flex;
  flex-wrap: nowrap;
}
/* 另一个属性 */
.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}
/* 使排序反向 */
.flex-wrap-reverse{
  display: flex;
  flex-wrap: wrap-reverse;
}

/* justify-content的属性学习 */
/* 左对齐 */
.justify-content-flex-start{
  display: flex;
  justify-content: flex-start;
}
/* 右对齐 */
.justify-content-flex-end{
  display: flex;
  justify-content: flex-end;
}
/* 居中 */
.justify-content-center{
  display: flex;
  justify-content: center;
}
/* 子元素周围(around,主要表现在子元素两侧的间距上) 等距间隔 */
.justify-content-space-around{
  display: flex;
  justify-content: space-around;
}


/* 元素体之间(between) 等距间隔 */
.justify-content-space-between{
  display: flex;
  justify-content: space-between;
}

/* align-items 属性练习 */
/* 首先定义 实例对象的尺寸 */
.size-align-items-A{
  width: 100px;
  height: 100px;
}

.size-align-items-B{
  width: 100px;
  height: 150px;
}
.size-align-items-C{
  width: 100px;
  height: 200px;
}

.align-items-flex-start{
  display: flex;
  /* 交叉轴起点对齐,其实就是"顶部对齐",这是个默认值 */
  align-items: flex-start
}

/* 交叉轴的 终点对齐,其实就是'底部对齐'  */
.align-items-flex-end{
  display: flex;
  /* 交叉轴起点对齐,其实就是"顶部对齐",这是个默认值 */
  align-items: flex-end
}

/* 在交叉轴的方向上 居中,其实就是'上下对齐' */
.align-items-center{
  display: flex;
  align-items: center;
}

/* baseline */
.align-items-baseline{
  display: flex;
  /* 子元素的第一个元素,内容基线对齐 */
  align-items: baseline;
}

/* 定义统一的 背景阴影,以显示对齐的区别 */
.background{
  background-color: gray;
}

/* 尝试 调整内容的基线 baselinecontroller */
.baselinecontroller-padding{
  padding-top: 20px;
  /* margin-top: 20px; */
}

.baselinecontroller-margin{
  /* padding-top: 20px; */
  margin-top: 20px;
}

.baselinecontroller-content{
  /*控制文本 距离顶部 20px,距离左侧20px */
  margin-top:20px;
  margin-left: 20px;
}
.borderstyle{
  border: 1px solid red;
}

/* 指定父容器的 高度 */
.fatherstyle{
  height: 200px;
}
/* 指定父容器的样式属性 */
.align-items-stretch{
  display: flex;
  align-items: stretch;
}

/* 如果不指定宽度,则view的宽度依据view内的子元素宽度确定 */
.size-align-items-stretch-A{
  /* 空空如野,什么都不指定 */
  width: 20px
}
.size-align-items-stretch-B{
  /* 空空如野,什么都不指定 */
  width: 60px
}
.size-align-items-stretch-C{
  /* 空空如野,什么都不指定 */
  width: 30px
}

/* align-content 属性的特点 */
/* 这里需要对父容器的view 设置一个 宽度才能体现出区别 */
.align-content-father-box-style{
  height: 600px;
  background-color: gray;
}

.align-content-flex-start{
  display: flex;
  flex-wrap: wrap;
  /* 这个是 交叉轴的 起点对齐 */
  align-content: flex-start;
}

.align-content-flex-end{
  display: flex;
  flex-wrap: wrap;
  /* 这个是 交叉轴的 终点对齐 */
  align-content: flex-end;
}

.align-content-center{
    display: flex;
  flex-wrap: wrap;
  /* 这个是 交叉轴方向上 居中 */
  align-content: center;
}

.align-content-sapce-between{
    display: flex;
  flex-wrap: wrap;
  /* 这个是 交叉轴方向上 居中 */
  align-content:space-between;
}

.align-content-sapce-around{
    display: flex;
  flex-wrap: wrap;
  /* 这个是 交叉轴方向上 居中 */
  align-content:space-around;
}

实际的运行效果就不再上传了.

感觉对小程序flex布局理解深刻不少,至少和android的布局理解能相互映射了.

好了,开始项目的页面进程吧