「小程序JAVA實戰」小程序的flex佈局（22）

時間  2019-12-16
標籤 程序 java 實戰 flex 佈局 欄目 Java 简体版
原文   原文鏈接

以前已經把小程序的框架說完了，接下來講說小程序的組件，在說組件以前，先說說佈局吧。源碼：https://github.com/limingios/wxProgram.git 中的No.9css

小程序的flex佈局

  • 小程序建議使用flex佈局進行排版
    >其實div+css的方式也能夠，只是官方建議使用flex佈局的方式
  • flex 就是一個盒裝彈性佈局
  • flex是一個容器，全部的子元素都是它的成員。

整個是一個大盒子，大盒子裏面有不少的小塊a，b，c，d，e，f都是他的成員，針對其中的成員能夠增長對應的樣式，能夠看出來a，b，d是比較大的，c是最小的，咱們能夠經過樣式控制它們的大小，咱們也能夠經過order的方式控制他們的位置順序，通常正常的我們的頁面都有順序的，能夠經過佈局的order屬性，把順序給展現出來。ios

  • 定義佈局display:flex
  • flex 容器的屬性
    flex-direction：排列方向
    flex-wrap：換行規則
    justify-content：對齊方式

flex-direction

容器內的方向，方向能夠從上到下，從左到右。git

  • row[flex-direction 默認佈局方式]

    從左到右github

  • row-reverse

    從右到左編程

  • column

    從上到下小程序

  • column-reverse

    從下到上bash

  • 演示
    flex-direction.wxml

<!--flex-direction.wxml-->
<view class="container-row">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:20rpx;'>
</view>

<view class="container-row-reverse">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:20rpx;'>
</view>

<view class="container-column">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>


<view style='width:100%;height:20rpx;'>
</view>

<view class="container-column-reverse">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>
複製代碼

flex-direction.wxss框架

.container-row{
  display: flex;
  flex-direction: row;
}

.container-row-reverse{
  display: flex;
  flex-direction: row-reverse;
}

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

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

.size{
  width: 200rpx;
  height: 150rpx;
}
.a {
  background: red;
}
.b {
  background: yellow;
}

.c {
  background: blue;
}

.d {
  background: green;
}

.e {
  background: gold;
}
複製代碼

flex-wrap

容器換行的屬性，分別是不換行，換行，逆向換行xss

  • nowrap[flex-nowwrap 默認不換行]

    不換行佈局

  • wrap

    換行

  • wrap-reverse

    逆向換行

  • 演示
    container-wrap.wxml

<!--container-wrap.wxml-->
<view class="container-nowrap">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
歡迎訪問個人我的網站：idig8.com
公衆號：編程坑太多
</view>

<view class="container-wrap">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
歡迎訪問個人我的網站：idig8.com
公衆號：編程坑太多
</view>

<view class="container-wrap-reverse">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

複製代碼

flex-wrap.wxss

.container-nowrap{
  display: flex;
  flex-wrap: nowrap;
}
.container-wrap{
    display: flex;
  flex-wrap: wrap;
}

.container-wrap-reverse{
    display: flex;
  flex-wrap: wrap-reverse;
}


.size{
  width: 200rpx;
  height: 150rpx;
}
.a {
  background: red;
}
.b {
  background: yellow;
}

.c {
  background: blue;
}

.d {
  background: green;
}

.e {
  background: gold;
}
複製代碼

flex-wrap

靠那個方向對齊的一個屬性

  • flex-start[flex-start 默認左對齊]

    左對齊

  • flex-end

    向右對齊

  • center【使用最多的方式】

    居中對齊

  • space-around

    在成員元素周圍包裹空格

  • space-between

    在成員元素以前留空白

  • 演示
    justify-content.wxml

<!justify-content.wxml-->
<view class="container-flex-start">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
歡迎訪問個人我的網站：idig8.com
公衆號：編程坑太多
</view>

<view class="container-flex-end">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
歡迎訪問個人我的網站：idig8.com
公衆號：編程坑太多
</view>

<view class="container-center">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
歡迎訪問個人我的網站：idig8.com
公衆號：編程坑太多
</view>

<view class="container-space-around">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
歡迎訪問個人我的網站：idig8.com
公衆號：編程坑太多
</view>

<view class="container-space-between">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>
複製代碼

justify-content.wxss

.container-flex-start{
  display: flex;
  justify-content: flex-start;
}
.container-flex-end{
  display: flex;
  justify-content: flex-end;
}

.container-center{
  display: flex;
  justify-content: flex-center;
}

.container-space-around{
  display: flex;
  justify-content: space-around;
}


.container-space-between{
  display: flex;
  justify-content: space-between;
}

.size{
  width: 50rpx;
  height: 150rpx;
}
.a {
  background: red;
}
.b {
  background: yellow;
}

.c {
  background: blue;
}

.d {
  background: green;
}

.e {
  background: gold;
}
複製代碼

flex成員元素的樣式設置

順序和比例分配

  • order

    經過數字對flex容器內部的成員設置顯示的順序

  • flex

    設置每一個成員所佔行級的顯示比例

  • 演示
    order-flex.wxml

<!--order-flex.wxml-->
<view class="container">
  <view class='size a'>a</view>
  <view class='size b'>b</view>
  <view class='size c'>c</view>
  <view class='size d'>d</view>
  <view class='size e'>e</view>
</view>

<view style='width:100%;height:100rpx;'>
歡迎訪問個人我的網站：idig8.com
公衆號：編程坑太多
</view>
複製代碼

order-flex.wxss

.container{
  display: flex;
  justify-content: flex-start;
}

.size{
  height: 150rpx;
}
.a {
  background: red;
  order:5;
  flex:4;
}
.b {
  background: yellow;
  order:1;
  flex:1;
}

.c {
  background: blue;
  order:3;
  flex:2;
}

.d {
  background: green;
  order:32;
  flex:3;
}

.e {
  background: gold;
  order:4;
  flex:2;
}
複製代碼

PS：flex佈局基本說完了，基本也給各類場景下的屬性含義直觀的方式進行了演示，可是老鐵雖然我搞完了，可是大家若是想學小程序仍是勤加練習的，好腦子不如爛筆頭對吧！


>>原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！
>>原文連接地址：「小程序JAVA實戰」小程序的flex佈局（22）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程