来自:授权地址

作者:水牛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. 电容参数:X5R,X7R,Y5V,COG 详解

    电容参数:X5R,X7R,Y5V,COG 详解 文章来源:http://www.hzlitai.com.cn/article/ARM9-article/cphard/1777.html 仅供分享学习~ ...

  2. CentOS6.5安装Eclipse

    安装说明 1.安装环境: CentOS6.5 64位系统 2.安装方式:tar.gz安装 3.软 件 包:eclipse-jee-luna-SR1-linux-gtk-x86_64.tar.gz 4. ...

  3. Replace 删除、替换函数精解示例

    '************************************************************************* '**模 块 名:Replace函数精解示例 '* ...

  4. CSS篇之动画(2)

    animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...

  5. SDOI 2016 征途 决策单调性

    题目大意:有一个数列,将其分成m段,求最小方差 先弄出n^3的dp,打出决策点,然后发现决策点是单调递增的,决策单调性搞一搞就可以了 #include<bits/stdc++.h> #de ...

  6. IOS网络第七天WebView-04仿网易新闻详情

    *************** #import "HMViewController.h" @interface HMViewController () @end @implemen ...

  7. CSS选择器中类和ID选择器的区别

    类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选 ...

  8. Creating a Clean, Minimal-Footprint ASP.NET WebAPI Project with VS 2012 and ASP.NET MVC 4

    Creating a Clean, Minimal-Footprint ASP.NET WebAPI Project with VS 2012 and ASP.NET MVC 4 Building O ...

  9. 利用Generator解决异步回调原理

    var i = 0; i++; function ajax(url){ return new Promise(function(resolve, reject){ setTimeout(functio ...

  10. 【Java并发编程实战】-----“J.U.C”:锁,lock

    在java中有两种方法实现锁机制,一种是在前一篇博客中([java7并发编程实战]-----线程同步机制:synchronized)介绍的synchronized,而另一种是比synchronized ...