小程式開發基礎-view檢視容器

Jeremy_Yoyo發表於2020-11-18

標題圖

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	縱向排列

專案內容對齊（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
微信小程式分享

小程式開發基礎(一)
2024-07-01
app，小程式開發基礎知識
2024-03-25
APP
小程式-雲開發 bindscroll滾動事件執行setData（）方法，導致scroll-view檢視抖動
2020-05-17
事件View
小程式開發之基礎知識（0）
2018-08-10
MySQL View 檢視
2024-04-09
MySqlView
微信小程式開發系列二：微信小程式的檢視設計
2018-09-04
微信小程式
View基礎
2018-07-05
View
微信小程式開發系列(一) ：開發環境搭建和微信小程式的檢視設計與開發
2022-04-24
微信小程式開發環境
視訊開發基礎篇
2018-07-26
小程式基礎
2020-08-29
iOS開發小記-基礎篇
2019-10-23
iOS
提升開發效率，小程式容器來幫你
2023-03-14
微信小程式開發基礎（一）「配置」與「邏輯層」
2019-05-25
微信小程式
ASP.Net MVC開發基礎學習筆記（10）：分部檢視PartialView
2018-06-14
ASP.NETMVC筆記View
Django基礎之三（類檢視）
2019-02-16
Django
sql大資料基礎（檢視）
2020-10-06
SQL大資料
corejava基礎知識(6)-檢視
2019-03-13
Java
【Flutter 基礎】檢視佈局-前言
2021-07-22
Flutter
iOS開發基礎篇--NSNotificationCenter使用小結
2018-11-19
iOS
影視APP開發基礎功能詳解
2022-01-12
APP
hive中的 lateral view(側檢視)
2020-11-08
HiveView
Django基礎三之檢視函式
2019-07-17
Django函式
【學習】SQL基礎-015-檢視
2018-04-10
SQL
Django基礎三之路由、檢視、模板
2022-03-16
Django路由
【秒懂音視訊開發】05_Qt開發基礎
2021-03-04
QT
[Java基礎]容器
2024-07-23
Java
容器化基礎
2022-02-13
docker檢視容器IP地址
2018-07-19
Docker
Android 自定義View基礎(一)
2019-05-05
AndroidView
laravel利用artisan建立view檢視檔案
2020-11-09
LaravelView
美美優選小程式開發（開發小程式）
2020-08-12
微信小程式開發之大神之路最全微信小程式開發教程（視訊+精品文章）
2018-07-16
微信小程式
Linux基礎命令---lpstat檢視列印任務
2019-03-29
Linux
Flutter檢視基礎簡介--Widget、Element、RenderObject
2018-06-21
FlutterObject
Linux基礎命令---lpq檢視列印佇列
2019-03-27
Linux佇列
《MySQL 基礎篇》八：約束和檢視
2024-09-22
MySql
關於開發檢視
2021-08-26
docker檢視容器日誌命令
2019-12-24
Docker

小程式開發基礎-view檢視容器

view

屬性

原始碼

開源github分享

相關文章