原文:微信小程序把玩（八）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. 【u021】广义斐波那契数列

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 广义的斐波那契数列是指形如an=p*an-1+q*an-2的数列.今给定数列的两系数p和q,以及数列的 ...

  2. NSString与int和float的相互转换

    NSString *tempA = @"123"; NSString *tempB = @"456"; 1,字符串拼接 NSString *newString ...

  3. 使用OTP原则构建一个非阻塞的TCP服务器

    http://erlangcentral.org/wiki/index.php/Building_a_Non-blocking_TCP_server_using_OTP_principles CONT ...

  4. 学习鸟哥的Linux私房菜笔记（13）——用户管理

    一.检查用户身份 用户可以使用下列指令了解用户身份 who :查询当前在线的用户 groups :查询用户所属组 id :显示当前用户信息 finger :查询用户信息 二.添加用户 用指令添加命令 ...

  5. Azure 与 AI

    微软 Build 2017 开发者大会:Azure 与 AI 的快速发展   欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 一年一度的微软 Build 大会准时起航,本年度大 ...

  6. Linux之定时任务Crond介绍

    Linux之定时任务 定时任务Crond介绍 Crond是linux系统中用来定期执行命令/脚本或指定程序任务的一种服务或软件,一般情况下,我们安装完Centos5/6 linux操作系统之后,默认便 ...

  7. 阿里云centos7.2自己安装mysql5.7远程不能访问解决方案

    版权声明:转载也行 https://blog.csdn.net/u010955892/article/details/72774920 最近,无意中看到阿里云服务器降价,所以一时手痒,买了一年的服务器 ...

  8. ASP.NET获取web应用程序的路径

    服务器磁盘上的物理路径: HttPRuntime.AppDomainAppPath虚拟程序路径: HttpRuntime.AppDomainAppVirtualPath 任何于Request/Http ...

  9. go-wingui 2018 全新 v2.0 版本发布，包含重大更新!

    go-wingui 2018 全新 v2.0 版本发布,包含重大更新!使用新版CEF内核Chromium 63.0.3239.109,页面可以使用最新的css3,html5技术.使用delphi7重写 ...

  10. background意识（两）

    今天看到了有关学习的价值的文章background于 [0积分下载我的小Demo]