一、align-items和其参数  stretch / baseline

注:sretch只有在交叉轴没有设置固定长度的情况下才有作用

                                

baseline是以第一个子元素为基准,后面的子元素与第一个子元素对齐。

二、flex-wrap 和其参数 row-wrap (默认)  /  wrap    /

flex-wrap:作用---换行

flex布局,基础内容已经结束,欢迎大家一起交流。

<view class="root">
<view class="box1">1</view>
<view class="box2">2</view>
<view class="box3">3</view>
</view>
 
 
.root{
display: flex;
/* 方块以列的方式排布 */
/* flex-direction: column; */
/* 把方块的位置调转 */
/* flex-direction: column-reverse; */
/* justify-content: space-evenly; */
flex-direction: row;
justify-content: center;
/* align-items: baseline; */
flex-wrap:wrap;
height: 370px;
}
.root view{
width: 150px;
height: 100px;
 
}
.box1{
">bisque;
font-size:30px;
}
.box2{
">blue;
font-size:20px;
}
.box3{
">pink;
font-size:60px;
}

微信小程序开发--flex详细解读(2)的更多相关文章

  1. 微信小程序开发--flex详细解读

    一.结构:flex布局 是由一个大的容器加上多个子元素组成. <view class="container"> <view </view> <v ...

  2. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  3. 微信小程序开发总结(详细)

    转载: 小程序开发总结(详细) 这段时间一直在做小程序,总结下.后续可能会不断更新,努力写仔细点,争取让人看到就能会写. 一,页面结构. 这基本是小程序的标准目录结构.我们从上到下解释下:pages文 ...

  4. VSCode 微信小程序 开发环境配置 详细教程

    本博客已暂停更新,需要请转新博客http://www.whbwiki.com/231.html 配置 VsCode 微信小程序开发环境并非不用官方的 微信小程序开发者工具 ,而是两者配合适用,可以极大 ...

  5. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  6. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  7. 微信小程序开发总结(一)

    微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...

  8. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  9. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

随机推荐

  1. VMware10新建虚拟机

    1. 新建虚拟机 2. 选择 “典型(推荐)(T)” 安装 3. “稍后安装操作系统”,创建一个空白硬盘 4. 选择 “Linux” 的 “CentOS 64位” 5. 设置 “虚拟机名称” 和 “位 ...

  2. 【Spring Data JPA篇】项目环境搭建(一)

    项目环境: spring4.1.6 hibernate4.3.11 spring-data-jpa1.9.0 1. 创建一个Java Project,将jar导入到lib目录下 #spring spr ...

  3. spark 配置

    1. mv slaves.template slaves slaves 文件添加 hadoop.slave01 hadoop.slave02 hadoop.slave03 2. cp spark-en ...

  4. Basics of Algorithmic Trading: Concepts and Examples

    https://www.investopedia.com/articles/active-trading/101014/basics-algorithmic-trading-concepts-and- ...

  5. Philosopher(set 线段树合并)

    直接维护乘积是肯定不可行的, 精度会爆炸, 于是我们来维护对数的和, 最后来计算最高位即可 那么转换成区间求和, 区间排序 区间排序的方式可以采用线段树维护最大递增块来解决,外层用set来维护线段树的 ...

  6. [LeetCode] 904. Fruit Into Baskets 水果装入果篮

    In a row of trees, the i-th tree produces fruit with type tree[i]. You start at any tree of your cho ...

  7. [LeetCode] 179. Largest Number 最大组合数

    Given a list of non negative integers, arrange them such that they form the largest number. Example ...

  8. 阿里Sentinel控制台源码修改-对接Apollo规则持久化

    改造背景 前面我们讲解了如何对接Apollo来持久化限流的规则,对接后可以直接通过Apollo的后台进行规则的修改,推送到各个客户端实时生效. 但还有一个问题就是Sentinel控制台没有对接Apol ...

  9. 递归函数详解——VS调试教你理解透彻递归

    #include <stdio.h> #include <stdlib.h> int recursion(int); ; int main(void) { recursion( ...

  10. 前端工程化 - 剖析npm的包管理机制

    转自https://juejin.im/post/5df789066fb9a0161f30580c 现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的 ...