原文:微信小程序把玩（八）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. html+css+js实现狼吃羊小游戏

    html+css+js实现狼吃羊小游戏 一.总结 一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...

  2. C#基础readonly 与const

    readonly 与 const readonly是运行时常量,const是编译期常量(在编译过程中已经把使用该值的都用值替代,不分配内存)readonly灵活性高,const效率高 readonly ...

  3. NSstring封装

    来自http://devtang.com/blog/2012/02/14/nsstring-java-like-wrapper/ NSStringWrapper.h #import <Found ...

  4. 51nod1673 树有几多愁 - 贪心策略 + 虚树 + 状压dp

    传送门 题目大意: 给一颗重新编号,叶子节点的值定义为他到根节点编号的最小值,求所有叶子节点值的乘积的最大值. 题目分析: 为什么我觉得这道题最难的是贪心啊..首先要想到 在一条链上,深度大的编号要小 ...

  5. JQuery 多个checkbox 只选中一个

    <form id="common-form"> <input name="check1" type="checkbox"/ ...

  6. A GUIDE TO UNDERSTANDINGDISCRETIONARY ACCESS CONTROL INTRUSTED SYSTEMS

    1. INTRODUCTION   The main goal of the National Computer Security Center is to encourage the widespr ...

  7. DirectX11学习笔记

    一.假定每种颜色的原始点是不同,表面的这样的原始颜色将被指定为每种颜色用线性内插值传授,这个被称为高洛德着色(Gouraud Shading).也称为平滑阴影: 二.三维图元:Direct3D中.使用 ...

  8. 《大话操作系统——扎实project实践派》(8.2)(除了指令集.完)

  9. webcollector 2.x 爬取搜狗搜索结果页

    /** * 使用搜狗搜索检索关键字并爬取结果集的标题 * @author tele * */ public class SougouCrawler extends RamCrawler{ public ...

  10. Troubleshooting routing topology based on a reference topology

    In one embodiment, a computing device (e.g., border router or network management server) transmits a ...