一、flex布局基础
二、相对定位和绝对定位
 
flex的容器和元素
 
主轴(左-右),交叉轴(上-下)
 
 
flex容器属性详解
flex-direction 决定元素的排列方向(默认row  column)
flex-wrap 决定元素如何换行(排列不下时) (nowrap不换行       wrap换行   wrap-reverse反转)
flex-flow  flex-direction 和flex-wrapde 的简写
justify-content 元素在主轴上的对其方式    (flex-start     flex-end   center    space-around   space-between)
align-items  元素在交叉轴的对其方式          ( flex-start  flex-end   center   stretch   baseline  )
 
flex元素属性详解
flex-grow 当有多余空间时,元素的放大比例  默认是1,等比缩小   0,保持不变,不被压缩      10 压缩10倍
flex-shrink 当空间不足时,元素的缩小比例
flex-basis 元素在主轴上占据的空间   250px   写rpx不解析
flex 是grow、shrink、basis的简写
order 定义元素的排列顺序  order: 4     2 3 1 
align-self 定义元素自身的对其方式   align-selft: flex-end;
 
 

微信小程序flex布局的更多相关文章

  1. 微信小程序~Flex布局

    有一点需要注意的是,你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全.开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”.

  2. 微信小程序—Flex布局

    参考教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html     https://xluos.github.io/demo/flexb ...

  3. 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...

  4. 微信小程序 | flex布局属性

    flex-direction 主轴方向 row: 横向 row-reverse: 横向倒序 column: 纵向 column-reverse: 纵向倒序; flex-wrap 元素排列换行 nowr ...

  5. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  6. uniapp 小程序 flex布局 v-for 4栏展示

    注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...

  7. 关于微信小程序<radio-group>布局排列

    微信小程序更新以后今天<radio>全部变成垂直排列了,布局乱了. 一开始尝试给外层<view>添加display:flex;flex-direction:row:未果. 后来 ...

  8. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  9. 小程序Flex布局

    容器属性 容器支持的属性有:display:通过设置display属性,指定元素是否为Flex布局.flex-direction:指定主轴方向,决定了项目的排列方式.flex-wrap:排列换行设置. ...

随机推荐

  1. sparse-PCA(稀疏主成分分析)是什么?

    不多说,直接上干货! 复杂降维技术有spare-PCA和sparse coding. 最近在科研需要,感谢下面的博主. Sparse PCA 稀疏主成分分析

  2. 说说Windows7 64bits下安装TensorFlow GPU版本会遇到的一些坑

    不多说,直接上干货! 再写博文,回顾在Windows7上安装TensorFlow-GPU的一路坑 Windows7上安装TensorFlow的GPU版本后记 欢迎大家,加入我的微信公众号:大数据躺过的 ...

  3. ora-12541无监听的一种场景

    项目上突然出现无法连接Oracle数据库的情况,提示无监听程序. 现象: 查看 listener.ora配置无问题,用Net Configuration Assistant重建监听,NCA也处于假死状 ...

  4. R.layout引用不了布局文件

    删除import android.R 引用包所在的R文件..

  5. css中vertical-align和line-height的用法

    css中vertical-align和line-height的用法 1.先来看一种现象: (1).将一个图片放入一个div块中,div块背景颜色设置为aquamarine.将会发现图片与div块下边沿 ...

  6. [BZOJ2144]国家集训队 跳跳棋

    题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动把他们的位置移动 ...

  7. Nginx——静态资源服务器(一)

    java web的项目中,我们经常将项目部署到Tomcat或者jetty上,可以通过Tomcat或者jetty启动的服务来访问静态资源.但是随着Nginx的普及,用Nginx来作为静态资源服务器,似乎 ...

  8. Vim升华之树形目录插件NERDTree安装图解【转】

    本文转载自:http://www.linuxidc.com/Linux/2013-06/86048.htm 无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文 ...

  9. import-module in $profile

    $PROFILE C:\Users\clu\Documents\PowerShell\Microsoft.PowerShell_profile.ps1 Import-Module 'C:\Users\ ...

  10. TibetanFont | ཡིག་གཟུགས། | 藏文字体

    1.Microsoft Himalaya 微软喜马拉雅字体 2007年1月30日,微软公司向全球市场同步发布了其最新操作系统Windows Vista,并自带藏文字体和输入法,Windows Vist ...