原文:微信小程序把玩（八）view组件

刚看到这个效果的时候还真是和ReactNative的效果一致，属性也基本的一样.

view这个组件就是一个视图组件使用起来非常简单。

主要属性：

flex-direction： 主要两个特性”row”横向排列”column”纵向排列

justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向）

  • 可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)

align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）

  • 可选属性 (‘flex-start’, ‘flex-end’, ‘center’）

wxml

<view class="page">

    <view class="page__hd">

        <text class="page__title">view</text>

        <text class="page__desc">弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。</text>

    </view>

    <view class="page__bd">

        <view class="section">

            <view class="section__title">flex-direction: row</view>

            <view class="flex-wrp" style="flex-direction:row;">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">flex-direction: column</view>

            <view class="flex-wrp" style="height: 300px;flex-direction:column;">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">justify-content: flex-start</view>

            <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">justify-content: flex-end</view>

            <view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">justify-content: center</view>

            <view class="flex-wrp" style="flex-direction:row;justify-content: center;">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">justify-content: space-between</view>

            <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">justify-content: space-around</view>

            <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">align-items: flex-end</view>

            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

        <view class="section">

            <view class="section__title">align-items: center</view>

            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

       <view class="section">

            <view class="section__title">align-items: center</view>

            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-start">

                <view class="flex-item" style="background: red"></view>

                <view class="flex-item" style="background: green"></view>

                <view class="flex-item" style="background: blue"></view>

            </view>

        </view>

    </view>

</view>

wxss

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

微信小程序把玩（八）view组件的更多相关文章

  1. 微信小程序把玩（二十八）image组件

    原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...

  2. 微信小程序把玩（十八）picker组件

    原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...

  3. 微信小程序把玩（二十一）switch组件

    原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</vi ...

  4. 微信小程序把玩（十七）input组件

    原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...

  5. 微信小程序把玩（十二）text组件

    原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...

  6. 微信小程序把玩（九）scroll-view组件

    原文:微信小程序把玩(九)scroll-view组件 scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用 ...

  7. 微信小程序把玩（十）swiper组件

    原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...

  8. 微信小程序把玩（二十九）video组件

    原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...

  9. 微信小程序把玩（二十七）audio组件

    原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...

随机推荐

  1. ArcGIS网络概述

    转载自原文 ArcGIS网络概述 一.地理网络 (一)基本概念 由一系列相互连通的点和线组成,用来描述地理要素(资源)的流动情况. (二)网络类型 1.定向网络 (1)流向由源(source)至汇(s ...

  2. [SVG] Add an SVG as an Embedded Background Image

    Learn how to set an elements background image to embedded SVG. This method has an added benefit of n ...

  3. SQLite编码

    •SQLite编码 •讲师:李明杰 •技术博客:http://www.cnblogs.com/mjios •SQLite3 •在iOS中使用SQLite3,首先要添加库文件libsqlite3.dyl ...

  4. WPF应用最小化至系统托盘运行

    原文:WPF应用最小化至系统托盘运行 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lordwish/article/details/5178889 ...

  5. tensorflow 函数接口的理解

    1. tf.nn.softmax tf.nn.softmax(logits, dim=-1, name=None) w*x+b ⇒ logits softmax 函数执行的操作:exp(logits) ...

  6. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

  7. zabbix从听说到学会

    一.zabbix简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供 ...

  8. Matlab Tricks（十四） —— 句柄（handle）（图形对象属性的读取与修改）

    0. 句柄的获得 H = subplot(1,2,1); saveas(H, [pathname,filename], 'jpg'); 1. h = plot(-) a = 0:10:360; x = ...

  9. cocos2d-x 源代码分析 总文件夹

    这篇博客用来整理与cocos2d-x相关的工作,仅仅要有新的分析.扩展或者改动,都会更改此文章. 祝大家愉快~ 1.源代码分析 1.CCScrollView源代码分析 http://blog.csdn ...

  10. VxWorks启动过程的详细解释（上）

    vxworks有三个图像: VxWorks Image有三种类型的文件 Loadable Images:由Boot-ROM引导通过网口或串口下载到RAM ROM-based Images(压缩/没有压 ...