原文:微信小程序把玩（八）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. java中抽象类和空的方法体有什么区别？

    public abstract void test();抽象方法public void test(){};方法体为空这两个有什么区别? public abstract void test(); 抽象方 ...

  2. Objective-C编码规范[译]

    原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : r ...

  3. [Angular] Create a simple *ngFor

    In this post, we are going to create our own structure directive *ngFor. What it should looks like i ...

  4. Android中蓝牙的基本使用----BluetoothAdapter类简介

    天气逐渐热了,自己也越来越懒了,虽然看着了很多东西,解决了很多问题,有些收获却不想写着.主要有一下两方面原因: 第一.以前写的一些关于Android知识的Blog,都是在学习过程中发现网络上没有相关知 ...

  5. AlphaImageLoader用法

    在 IE6 中,能够非常方便地利用 img 的 src 属性,实现本地图片预览,然而在 IE7 中,这样的办法却行不通.须要用 AlphaImageLoader. AlphaImageLoader 说 ...

  6. Python应用库大全总结

    学python,想必大家都是从爬虫开始的吧.毕竟网上类似的资源很丰富,开源项目也非常多. python学习网络爬虫主要分3个大的版块:抓取,分析,存储 当我们在浏览器中输入一个url后回车,后台会发生 ...

  7. Centos root权限的变化

    方法一:更改 /etc/sudoers 文件, 找到以下一行,把前面的凝视(#)去掉 ## Allows people in group wheel to run all commands %whee ...

  8. 数据集（benchmark）、常用数据集的解析（cifar-10、）

    What is the class of this image ? 主要是以下常见的数据集,用以衡量算法的分类准确率: mnist.cifar-10.cifar-100stl-10 svhn.ILSV ...

  9. hexo从零配置next全纪录

    1.按照官网按照hexo: 2.下载next(目前使用的是最新发布版本6.4.1),解压后重命名为next,放在hexo工程themes目录下: 3.网站配置文件_config.yml中,改成them ...

  10. 计算机的组成 —— 磁盘阵列（RAID）

    磁盘阵列(Redundant Arrays of Independent Disks,RAID),有"独立磁盘构成的具有冗余能力的阵列"之意.(另外一种常见阵列,FPGA:Fiel ...