欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序開發(fā)基礎(chǔ)之view視圖容器

 更新時間：2018年08月21日 09:03:32   作者：達叔小生  
這篇文章主要介紹了小程序開發(fā)基礎(chǔ)之view視圖容器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了小程序開發(fā)基礎(chǔ)之view視圖容器，分享給大家，具體如下：

視圖容器

// wxml
<view class="section">
 <view class="section__title">flex-direction: row</view>
 <view class="flex-wrp_one">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_one{
 display: flex;
 flex-direction: row;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

圖片

// wxml
<view class="section">
 <view class="section__title">flex-direction: column</view>
 <view class="flex-wrp_two">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_two{
 display: flex;
 flex-direction: column;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

圖片

// wxml
<view class="section">
 <view class="section__title">justify-content: flex-start</view>
 <view class="flex-wrp_three">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss 
.flex-wrp_three{
 display: flex;
 justify-content: flex-start;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

view

// wxml
<view class="section">
 <view class="section__title">justify-content: flex-end</view>
 <view class="flex-wrp_four">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_four{
 display: flex;
 justify-content: flex-end;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

view

// wxml
<view class="section">
 <view class="section__title">justify-content: center</view>
 <view class="flex-wrp_five">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_five{
 display: flex;
 justify-content: center;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

view

// wxml
<view class="section">
 <view class="section__title">justify-content: space-between</view>
 <view class="flex-wrp_six">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_six{
 display: flex;
 justify-content: space-between;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

view

// wxml
<view class="section">
 <view class="section__title">justify-content: space-around</view>
 <view class="flex-wrp_seven">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_seven{
 display: flex;
 justify-content: space-around;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

view

// wxml
<view class="section">
 <view class="section__title">justify-content: space-evenly</view>
 <view class="flex-wrp_eight">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_eight{
 display: flex;
 justify-content: space-evenly;
}
.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

view

屬性

排列方式(flex-direction) 描述
row 橫向排列
column 縱向排列

項目內(nèi)容對齊（justify-content） 描述
flex-start 向行頭緊挨
flex-end 向行尾緊挨
center 居中緊挨
space-between 平均分布
space-around 平均分布 ,兩邊留有一半間隔
space-evenly 兩邊間隔與中間相同

源碼

// wxml
<view class="section">
 <view class="section__title">flex-direction: row</view>
 <view class="flex-wrp_one">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">flex-direction: column</view>
 <view class="flex-wrp_two">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: flex-start</view>
 <view class="flex-wrp_three">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: flex-end</view>
 <view class="flex-wrp_four">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: center</view>
 <view class="flex-wrp_five">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: space-between</view>
 <view class="flex-wrp_six">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: space-around</view>
 <view class="flex-wrp_seven">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>

<view class="section">
 <view class="section__title">justify-content: space-evenly</view>
 <view class="flex-wrp_eight">
  <view class="flex-item bc_green">1</view>
  <view class="flex-item bc_red">2</view>
  <view class="flex-item bc_blue">3</view>
 </view>
</view>
// wxss
.flex-wrp_one{
 display: flex;
 flex-direction: row;
}

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

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

.flex-wrp_four{
 display: flex;
 justify-content: flex-end;
}

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

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

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

.flex-wrp_eight{
 display: flex;
 justify-content: space-evenly;
}

.flex-item{
 width: 100px;
 height: 100px;
}

.bc_green{
 background: green;
}

.bc_red{
 background: red;
}

.bc_blue{
 background: blue;
}

開源github分享

Wechat_small_program_Share

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 一文詳解JS中的Map、Set、WeakMap和WeakSet

    一文詳解JS中的Map、Set、WeakMap和WeakSet

    在JavaScript中，Map、Set、WeakMap和WeakSet是四個不同的數(shù)據(jù)結(jié)構(gòu)，它們都有不同的特點和用途，本文詳細介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別，需要的朋友可以參考下
    2023-04-04
  • 兩種JS實現(xiàn)屏蔽鼠標右鍵的方法

    兩種JS實現(xiàn)屏蔽鼠標右鍵的方法

    這篇文章主要介紹了兩種JS實現(xiàn)屏蔽鼠標右鍵的方法，瀏覽者在訪問你網(wǎng)頁的時候就不能點擊右鍵，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2015-08-08
  • 小程序tab頁無法傳遞參數(shù)的方法

    小程序tab頁無法傳遞參數(shù)的方法

    這篇文章主要介紹了小程序tab頁無法傳遞參數(shù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • eval與window.eval的差別分析

    eval與window.eval的差別分析

    eval與window.eval的差別分析，學(xué)習(xí)js的朋友可以了解下。
    2011-03-03
  • js中url對象化管理分析

    js中url對象化管理分析

    這篇文章主要介紹了js中url對象化管理的相關(guān)知識以及用法介紹，有需要的朋友跟著小編一起學(xué)習(xí)下。
    2017-12-12
  • JQuery 在表單提交之前修改 提交的值

    JQuery 在表單提交之前修改 提交的值

    本文介紹在表單提交之前修改提交的值的方法，希望給需要的朋友一些幫助。
    2016-04-04
  • ES2015 Symbol 一種絕不重復(fù)的值

    ES2015 Symbol 一種絕不重復(fù)的值

    這篇文章主要介紹了Symbol是ES2015新增的一種值類型數(shù)據(jù)，表示一種絕不重復(fù)的值,需要的朋友可以參考下
    2016-12-12
  • 微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性示例

    微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性示例

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性,結(jié)合實例形式分析了微信小程序使用js操作wxml的wxss屬性相關(guān)原理、實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
    2018-12-12
  • 最常用的12種設(shè)計模式小結(jié)

    最常用的12種設(shè)計模式小結(jié)

    最常用的12種設(shè)計模式小結(jié)，學(xué)習(xí)js的朋友可以參考下。
    2011-08-08
  • javascript實現(xiàn)的DES加密示例

    javascript實現(xiàn)的DES加密示例

    DES加密算法的方法把用戶信息在發(fā)送的時候進行加密很實用，下面有個不錯的示例，需要的朋友可以參考下
    2013-10-10

最新評論