(四)Flex 布局教程和例子
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
1.flex-direction属性
flex-direction
属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值。
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿
2 justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
3 align-items属性
align-items
属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex 还有好多的属性 详见阮一峰
例子
下面以在微信中应用为例
/* index.wxml */ <view class="menu">
<view class="item">
<image src="/static/girl.jpg"></image>
<text>2015</text>
</view>
<view class="item">
<image src="/static/girl.jpg"></image>
<text>年</text>
</view>
<view class="item">
<image src="/static/girl.jpg"></image>
<text>11</text>
</view>
<view class="item">
<image src="/static/girl.jpg"></image>
<text>29</text>
</view>
</view>
/**index.wxss**/
image{
width: 100rpx;
height: 100rpx;
border-radius: 50rpx; 图片变圆角
}
.menu{ flex用法
display: flex;
/* 在水平方向排列 */
/* row规定主轴方向水平 */
/* column规定主轴方向垂直 */
flex-direction: row;
/* 在主轴方向如何展示 flex-start/center/space-around/space-between */
justify-content: space-around;
}
/* 在wxml中嵌套的样式 */
.menu .item{
display: flex;
flex-direction: column;
align-items: center;
}
(四)Flex 布局教程和例子的更多相关文章
- Flex 布局教程:实例篇(转)
你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...
- (转)Flex 布局教程:
这个博客的内容比较新,多看看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [语法篇] http://www.ruanyifeng. ...
- Flex 布局教程:实例
分类: 开发者手册 Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...
- display:flex 布局教程,弹性布局!
display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- CSS学习笔记(12)--Flex 布局教程:实例篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
- 二、Flex 布局教程:实例篇
注:本文转自大神阮一峰,自己加了少许改动~ 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解 ...
- Flex 布局教程:语法和实例
语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...
- Flex 布局教程:实例篇【转】
Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...
- Flex 布局教程:语法篇 【转】
Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网 ...
随机推荐
- 3_06_MSSQL课程_Ado.Net_接口、委托、事件、观察者模式
1.接口——实现接口 2.委托.事件(定义事件.注册事件.触发事件) 3.接口和事件的区别,怎么分情况用? 4.观察者模式作为设计模式的一种,也称发布订阅模式. 应对类型的变化和个数的变化. 中介设计 ...
- 李德胜系列——李德胜和CPC人的初心
很久很久以前,有三条恶龙盘踞着村庄,恶龙们及其爪牙对村民敲骨吸髓,逼着村民卖儿鬻女.苦不堪言.但是村民们却对此压迫习以为常,逆来顺受. 后来,一个书生来到了这个村庄,告诉村民,不许跪,也没有人值得他们 ...
- TensorFlow基础三(Scope)
用到变量名了,就涉及到了名字域的概念.通过不同的域来区别变量名,毕竟给所有变量都直接取不同名字还是有点辛苦的. 主要是name_scope和variable_scope,name_scope 作用于操 ...
- 微信授权登陆接入第三方App(步骤总结)Android。
这几天开发要用到微信授权的功能,所以就研究了一下.可是微信开放平台接入指南里有几个地方写的不清不楚.在此总结一下,以便需要的人. 很多微信公众平台的应用如果移植到app上的话就需要微信授权登陆了. 目 ...
- Android之Builder对话框的一些常用方式
原文: http://blog.csdn.net/kkfdsa132/article/details/6322835 Android为我们提供几种对话框,主要有:AlertDialog.Progres ...
- SICP题解
这里用Common Lisp.Haskell等函数式语言. 1.2.请将下面表达式变换为前缀形式: $$ \frac{5 + 4 + (2 - (3 - (6 + \frac{4}{5})))}{3( ...
- ImagePullBackOff 错误处理
kubectl create -f nginx-deployment.yaml 执行之后,kubectl get pods 一致出现 ImagePullBackOff,一直无法执行成功. yaml文件 ...
- 日常使用SqlServer的笔记
表操作 查表大小 sp_spaceused 表名 修改表名 ALTER TABLE table RENAME TO NEW_TABLE_NAME; 修改列名 不支持 ALTER TABLE table ...
- prototype入门----自定义创建元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- KVM——虚拟化
KVM——虚拟化 虚拟化是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机.在一台计算机上同时运行多个逻辑计算机,每个逻辑计算机可运行不同的操作系统,并且应用程序都可以在相互独立的空间内运行而互相 ...