原文:微信小程序把玩（八）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. D3.js以及通用JS（JavaScript）读取并解析server端JSON的注意事项

    这个需求事实上挺明白的.可是网上搜出来的教程都乱七八糟,认为实在须要自己总结一下. D3.js眼下已经被广泛使用在数据可视化领域,随着大数据的持续发展,这个框架预计会在今后更加流行(据说其作者Mike ...

  2. 微服务学习笔记（1）——使用MagicOnion实现gRPC

    原文:微服务学习笔记(1)--使用MagicOnion实现gRPC 1.什么是gRPC 官方文档:https://grpc.io/docs/guides/index.html 2.什么是MagicOn ...

  3. 今天犯了个小错误：_dataArray.count>1 和_dataArray.count>0搞混淆了

    _dataArray.count>1 和_dataArray.count>0搞混淆了:当数据为一条时,条件不成立.应该_dataArray.count>＝1  或者>0   ( ...

  4. 学习鸟哥的Linux私房菜笔记（1）——Linux系统入门

    今天在阿里云申请了一个centos系统的云服务器,以前对linux了解的只是皮毛,记了几个命令还给忘了,整了半天都弄不好,作为一个做过javaweb开发的coder实在是惭愧啊,决定从今天开始学习Li ...

  5. ASCII码（转）

    ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧 ...

  6. 【BZOJ 1032】 [JSOI2007]祖码Zuma

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1032 [题意] [题解] /* 设f[i][j]表示从第i个珠子开始的j个珠子被消除; ...

  7. htmlunit 模拟登录 无验证码

    1.模拟登录csdn,最开始的时候使用的是httpclient,网上的所有模拟登录csdn的版本都是找到lt/execution/event_id.连同用户名及密码 一起发送即可,但是目前的csdn的 ...

  8. Spring MVC的RequestContextHolder使用误区 good

    JShop简介:jshop是一套使用Java语言开发的B2C网店系统,致力于为个人和中小企业提供免费.好用的网店系统. 项目主页:http://git.oschina.net/dinguangx/js ...

  9. mac下装php5.6

    OS X10.11自带了php5.5,项目中使用的是php5.6,用brew install --without-apache --with-fpm --with-mysql php56装php5.6 ...

  10. postman VS restlet client基本使用

    postman与restlet都是使用的google浏览器的插件(出不去自行解决,you get!),此两款软件的强大这里就不在赘述了,postman的网上说明很多,restlet的中文配置很少了.这 ...