flex布局介绍:

  flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全;

flex布局实例:

  比如有两个div,一个div的宽度为100px, 想让另外一个div的占据剩下的宽度:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:; }
.box{
display:flex;
flex-direction:row;
}
.box .child{
width:40px;
background:#f00;
}
.box .child1{
flex:;
background:#0f0
}
</style>
</head>
<body>
<div class="box">
<div class="child">child</div>
<div class="child1">child1</div>
</div>
</body>
</html>

  或者有两个div,一个高度为100px, 另外一个高度自动补全当前界面下剩余的高度:

  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body,.box{
height:%;
}
body{
margin:; }
.box{
display:flex;
flex-direction:column;
}
.box .child{
height:40px;
background:#f00;
}
.box .child1{
flex:;
background:#0f0
}
</style>
</head>
<body>
<div class="box">
<div class="child">child</div>
<div class="child1">child1</div>
</div>
</body>
</html>

  所以说flex布局是很灵活, flex布局没出现之前,这种布局不好实现, 只能通过-webkit-calc的方式, 或者使用javascript的方式动态修改元素的样式,还有水平方向元素自动适应布局等, 用了flex,css的布局方式更加多样化了;

  flex布局也可以实现未知宽高的元素自动居中, 以前用的比较多的居中布局方式主要为固定宽高的负margin居中:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body,.parent{
height:%;
}
.parent{
justify-content:center;/*水平居中*/
align-items: center; /*垂直居中*/
display:-webkit-flex;
/*
flex-direction:排版方向
flex-wrap:如果宽度超出父级宽度, 是否折行
flex-flow:flex-direction和flex-wrap的缩写
*/ }
.child{
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
hehe
</div>
</div>
</body>
</html>

  子元素css的样式flex:auto或者flex:1的时候, 该子元素会自动适应当前宽高:

  如果一个父元素为flex布局, 内部元素的宽度会根据各自的flex属性值进行等比切分:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:;
padding:;
}
</style>
</head>
<body>
<style>
.box{
display:flex;
flex-direction:row
}
.box .child{
flex:;
}
.box .chi{
flex:;
}
</style>
<div class="box">
<div class="child">
child
</div>
<div class="chi">
chi, child占用1/4的百分比, chi占用3/4的百分比
</div>
</div>
<br>
<br>
<style>
.box1{
display:flex;
flex-direction:row;
}
.box1 .child{
width:40px;
}
.box1 .chi{
flex:;
}
</style>
<div class="box1">
<div class="child">
child
</div>
<div class="chi">
chi, child固定长度, chi自动适应
</div>
</div>
<br>
<br>
<style>
.box2 {
display:flex;
flex-direction:row;
}
.box2 .child1{
width:40px;
}
.box2 .child2{
flex:auto;
}
.box2 .child3{
width:40px;
}
</style>
<div class="box2">
<div class="child1">child1</div>
<div class="child2">child2, 两边固定宽度, 中间自动适应</div>
<div class="child3">child3</div>
</div>
</body>
</html>

  高度自动适应的demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:;
padding:;
}
html,body,.box{
height:%;
}
.box{
display:flex;
flex-direction:column;
}
.box .header{
height:40px;
background:#f00;
}
.box .bodyer{
flex:;
background:#0f0;
}
.box .footer{
height:40px;
background:#00f;
}
</style>
</head>
<body>
<div class="box">
<div class="header">header</div>
<div class="bodyer">bodyer</div>
<div class="footer">footer</div>
</div>
</body>
</html>

  通过flex布局可以模拟一个微信的聊天窗口:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
*{
margin:;
padding:;
}
html,body,.box{
height:%;
}
.box{
display:-webkit-flex;
display:flex;
flex-direction:column;
font-family:"microsoft yahei";
font-size:18px;
}
.box .header{
height:40px;
line-height:40px;
text-align:center;
background:#3498DB;
color:#fff;
}
.box .body{
display: block;
border-bottom:1px solid #eee;
overflow:auto;
flex:;
}
.box .send-left {
align-self:flex-end;
margin-top:10px;
position:relative;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
line-height:35px;
margin-left:10px;
padding: 10px;
float:left;
}
.box .send-left .arrow {
position:absolute;
top:5px;
left:-15px;
width:;
height:;
font-size:;
border:solid 8px;
border-color:#fff #F8C301 #fff #fff;
}
.box .send {
align-self:flex-end;
margin-top:10px;
position:relative;
height:35px;
background:#2ECC71;
border-radius:5px; /* 圆角 */
line-height:35px;
margin-right:10px;
padding: 10px;
float:right;
}
.box .send .arrow {
position:absolute;
top:5px;
right:-15px;
width:;
height:;
font-size:;
border:solid 8px;
border-color:#fff #fff #fff #2ECC71;
}
.box .clear{
clear:both;
}
.box .footer{
height:40px;
line-height:40px;
display:-webkit-flex;
display:flex;
}
.box .footer input{
flex:auto;
border:none;
border-right:1px solid #eee;
font-size:18px;
padding-left:4px;
}
.box .footer button{
width:50px;
font-size:18px;
}
</style>
</head>
<body>
<!--
容器属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
项目属性:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
-->
<div class="box">
<div class="header">
消息
</div>
<div class="body">
<div class="send-left">
hehe我哟我去
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
hehe
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
hehe我哟我去
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
<div class="clear"></div>
<div class="send">
来啊, 哈哈
<div class="arrow"></div>
</div>
</div>
<div class="footer">
<input type="text">
<button>发送</button>
</div>
</div>
</body>
<script> </script>
</html>

flex布局的其它css属性:

  Flex 容器属性:

  Flex 条目属性:

兼容:

  android 4.4以上版本支持display:flex。低版本不支持。

  安卓4.1,以及4.1以下不支持flex布局, 必须考虑别的方案;

  android的低版本无法使用display:flex, 但是可以使用display:box替代;

  要记得加浏览器前缀, 兼容写法如下:

  display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

  

参考:

  caniuse:http://caniuse.com/#feat=flexbox

  MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

  MDN参考资料:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox

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

在移动端中的flex布局的更多相关文章

  1. vue项目中h5移动端中通过flex布局实现首尾固定,中间滚动(借鉴)

    html中 <div class="flexLayoutr"> <div class="div_head"></div> & ...

  2. 在微信小程序中学习flex布局

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...

  3. CSS中的flex布局

    1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...

  4. 使用css中的flex布局弹性手风琴效果

    不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

  6. [续更]一起来撸一下Flex布局里面的那些属性

    Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...

  7. ReactNative之参照具体示例来看RN中的FlexBox布局

    今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...

  8. 【分享】谈CSS3中display属性的flex布局

    最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...

  9. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

随机推荐

  1. 【sinatra】修改默认ip绑定

    加入 # 默认的bind是127.0.0.1 set :bind, '0.0.0.0' #0.0.0.0之后你能通过lan访问这个服务器

  2. Git-rebase与merge小结

    git merge是用来合并两个分支的. git merge b # 将b分支合并到当前分支 同样 git rebase b,也是把 b分支合并到当前分支 ---------------------- ...

  3. 【C#学习笔记】Hello World

    using System; namespace ConsoleApplication { class Program { static void Main(string[] args) { Conso ...

  4. arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

    测试方法 function test(){ var arr = [0,1,2,3]; arr.splice(1,1,'a');//case console.dir(arr); } case1: arr ...

  5. 【jquery插件】收藏

    http://www.oschina.net/project/tag/356/jquery-file-upload

  6. PL/SQL学习(五)异常处理

    原文参考:http://plsql-tutorial.com/ 组成: 1) 异常类型 2) 错误码 3) 错误信息   代码结构: DECLARE Declaration section BEGIN ...

  7. KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-body-res

    koahub body res Format koa's respond json. Installation $ npm install koahub-body-res Use with koa v ...

  8. 【BZOJ1095】【ZJOI2007】捉迷藏 [动态点分治]

    题解: 好像还是比较简单的 对每个重心向下一层重心连边 树高是log的 我们对每一层维护两个信息 1.所有节点到上一层重心的距离 2.所有儿子的1堆的堆顶 另外开个总的堆 维护每一层最长+次长 修改是 ...

  9. alias重命名命令

    升级了openssh后,发现ctrl+l忽然无法清屏了. 如果需要清屏的话,就得执行clear,但我更喜欢简单粗暴的做法,于是想起alias命令 方式一: 如果只想在当前终端生效(exit该窗口终端后 ...

  10. String转换成Boolean类型

    Boolean.valueOf()方法: public static Boolean valueOf(String s) { return toBoolean(s) ? TRUE : FALSE; } ...