Flex 布局教程:实例篇
来源:互联网 发布:java做的小游戏 编辑:程序博客网 时间:2024/06/05 09:44
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。
你会看到,不管是什么布局,Flex往往都可以几行命令搞定。
我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。
一、骰子的布局
骰子的一面,最多可以放置9个点。
下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明,本节的HTML模板一律如下。
<div class="box"> <span class="item"></span></div>
上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。
1.1 单项目
首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。
.box { display: flex;}
设置项目的对齐方式,就能实现居中对齐和右对齐。
.box { display: flex; justify-content: center;}
.box { display: flex; justify-content: flex-end;}
设置交叉轴对齐方式,可以垂直移动主轴。
.box { display: flex; align-items: center;}
.box { display: flex; justify-content: center; align-items: center;}
.box { display: flex; justify-content: center; align-items: flex-end;}
.box { display: flex; justify-content: flex-end; align-items: flex-end;}
1.2 双项目
.box { display: flex; justify-content: space-between;}
.box { display: flex; flex-direction: column; justify-content: space-between;}
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}
阅读全文
0 0
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- flex布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- Flex 布局教程:实例篇
- 如 动态Inventory所介绍,ansibel可以从一个动态的数据源获取到inventory信息,包含元端数据源。
- 判断是否为质数
- 初步认识qt
- mysql优化连接数防止访问量过高的方法
- Android音频实时传输与播放:AMR硬编码与硬解码
- Flex 布局教程:实例篇
- 单片机驱动DM9000
- MapReduce--4--Combiner做MapTask局部合并
- 第一行代码 服务
- stringstream——超方便的类型转化
- Android 笔记之屏幕显示
- 同步异步,线程,阻塞
- 解析xml生成建表sql
- FragmentDialog闪屏问题及解决