微信小程序开发--flex详细解读(2)
一、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)的更多相关文章
- 微信小程序开发--flex详细解读
一.结构:flex布局 是由一个大的容器加上多个子元素组成. <view class="container"> <view </view> <v ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 微信小程序开发总结(详细)
转载: 小程序开发总结(详细) 这段时间一直在做小程序,总结下.后续可能会不断更新,努力写仔细点,争取让人看到就能会写. 一,页面结构. 这基本是小程序的标准目录结构.我们从上到下解释下:pages文 ...
- VSCode 微信小程序 开发环境配置 详细教程
本博客已暂停更新,需要请转新博客http://www.whbwiki.com/231.html 配置 VsCode 微信小程序开发环境并非不用官方的 微信小程序开发者工具 ,而是两者配合适用,可以极大 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- 微信小程序开发总结(一)
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
随机推荐
- VMware10新建虚拟机
1. 新建虚拟机 2. 选择 “典型(推荐)(T)” 安装 3. “稍后安装操作系统”,创建一个空白硬盘 4. 选择 “Linux” 的 “CentOS 64位” 5. 设置 “虚拟机名称” 和 “位 ...
- 【Spring Data JPA篇】项目环境搭建(一)
项目环境: spring4.1.6 hibernate4.3.11 spring-data-jpa1.9.0 1. 创建一个Java Project,将jar导入到lib目录下 #spring spr ...
- spark 配置
1. mv slaves.template slaves slaves 文件添加 hadoop.slave01 hadoop.slave02 hadoop.slave03 2. cp spark-en ...
- Basics of Algorithmic Trading: Concepts and Examples
https://www.investopedia.com/articles/active-trading/101014/basics-algorithmic-trading-concepts-and- ...
- Philosopher(set 线段树合并)
直接维护乘积是肯定不可行的, 精度会爆炸, 于是我们来维护对数的和, 最后来计算最高位即可 那么转换成区间求和, 区间排序 区间排序的方式可以采用线段树维护最大递增块来解决,外层用set来维护线段树的 ...
- [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 ...
- [LeetCode] 179. Largest Number 最大组合数
Given a list of non negative integers, arrange them such that they form the largest number. Example ...
- 阿里Sentinel控制台源码修改-对接Apollo规则持久化
改造背景 前面我们讲解了如何对接Apollo来持久化限流的规则,对接后可以直接通过Apollo的后台进行规则的修改,推送到各个客户端实时生效. 但还有一个问题就是Sentinel控制台没有对接Apol ...
- 递归函数详解——VS调试教你理解透彻递归
#include <stdio.h> #include <stdlib.h> int recursion(int); ; int main(void) { recursion( ...
- 前端工程化 - 剖析npm的包管理机制
转自https://juejin.im/post/5df789066fb9a0161f30580c 现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的 ...