来自:授权地址

作者:水牛01248

几个横排元素在竖直方向上居中

display: flex;
flex-direction: row;//横向排列
align-items: center;//垂直方向上居中

在母控件的正中:相当于android中的RelativeLayout的centerInParent=true.

display: flex;
flex-direction: row;//横向排列
justify-content: center;//水平居中
align-items: center;//垂直方向上居中

自定义modal的一个标题栏,带图标的标题居中,右边有关闭按钮

绕的一个坑: 中间的用div包裹,flex布局可实现centerInParent效果,右边的用position: absolute;right: 0.75rem,可以实现关闭按钮在右边,但是脱离的文档流,居中不好弄.
能不能不脱离flex的文档流?

可以的,左边加一个空的div,就可以对称了,用flex布局的justify-content: space-between,就能均匀排列了.

<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;
align-content: center;background-color: #0d88c1;padding-left: 0.75rem;padding-right: 0.75rem">
<div></div>
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;background-color: #1f9d85">
<div style="font-size: 2rem">图片</div>
<div >文字</div>
</div>
<div style="">x</div>
</div>

同理,利用justify-content: space-between + align-items: center 可以实现右边垂直居中的效果:

把左边的两个元素用div包裹,然后和右边的元素作为flex布局的两个item,用space-between撑到两边.

常见的tab导航栏的实现

.tab-container{
display: flex;
flex-direction: row;//横向排列
flex-wrap: nowrap;//不换行
overflow-x: scroll;//横向放不下时允许滚动
justify-content:space-around;//各item之间被间隔包裹
align-items: center;//垂直方向上居中
}

/*tab栏的条目数,自动均分*/
.tab-items{
flex: 1 0 200rpx;//本身大小200rpx,可以扩张(1:比如只有两个tab时,平分width),不许压缩(0)
text-align: center;
padding-bottom: 25rpx;
padding-top: 25rpx;
font-size: 30rpx;
color: #333333;
}

布局练习:

1.item布局

转自:转载地址

flex布局示例的更多相关文章

  1. Flex 项目属性:flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  2. flex 布局示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  4. CSS3的flex布局

    flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...

  5. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  6. flex基础示例

    flex的一些基础用法: <!-- Flex布局已经得到了所有浏览器的支持:chrome21+.Opera12.1+.Firefox22+.safari6.1+.IE10+ Webkit内核浏览 ...

  7. css3 flex 布局

    今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...

  8. 写给 Android 开发的小程序布局指南,Flex 布局!

    一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...

  9. 阮一峰:Flex 布局教程

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex ...

随机推荐

  1. DOM2级提供的对DOM结构执行深度优先遍历 笔记

    NodeIterator和TreeWalker这2个类型可以基于给定的起点对DOM结构执行深度优先遍历.(我测试用的浏览器是Chrome,介绍说IE不支持DOM遍历,但是不知道最新的IE支持不支持) ...

  2. backbone新手填坑教程资源

    backbone 入门第二版 http://www.kancloud.cn/kancloud/backbonejs-learning-note/49379 backbone 入门讲解 http://w ...

  3. redis配置文件英译汉

    # By default Redis asynchronously dumps the dataset on disk. This mode is # good enough in many appl ...

  4. Spring MVC中Session的正确用法<转>

    Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...

  5. HTML 常用标签

    一.基础标签 <!-- -->    定义注释 <!DOCTYPE> 定义文档类型 <style> 定义文档的样式信息 <meta> 定义关于HTML文 ...

  6. 使用Gemini构建自己的IDE

    你的项目中的领域特定语言是否需要自己的IDE?Visual Studio Shell是选择之一,但是过于庞大不易部署,而且很难使用.Tim Jones的Gemini框架是一个轻量级替代方案. Gemi ...

  7. 一道关于Promise应用的面试题

    题目:红灯三秒亮一次,绿灯一秒亮一次,黄灯2秒亮一次:如何让三个灯不断交替重复亮灯?(用Promse实现) 三个亮灯函数已经存在: function red(){ console.log('red') ...

  8. .NET单元测试的艺术-1.入门

    开篇:最近在看Roy Osherove的<单元测试的艺术>一书,颇有收获.因此,将其记录下来,并分为四个部分分享成文,与各位Share.本篇作为入门,介绍了单元测试的基础知识,例如:如何使 ...

  9. JWS.Mono如何进行“在线安装”

    这里话就不多说了,使用方法如下: wget http://jhonge.net/down4load/1413998270361/jwsmono_net.sh chmod a+x jwsmono_net ...

  10. [Unity][Heap sort]用Unity动态演示堆排序的过程(How Heap Sort Works)

    [Unity][Heap sort]用Unity动态演示堆排序的过程 How Heap Sort Works 最近做了一个用Unity3D动态演示堆排序过程的程序. I've made this ap ...