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布局的更多相关文章

vue项目中h5移动端中通过flex布局实现首尾固定，中间滚动（借鉴）
html中 <div class="flexLayoutr"> <div class="div_head"></div> & ...
在微信小程序中学习flex布局
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...
CSS中的flex布局
1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...
使用css中的flex布局弹性手风琴效果
不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
[续更]一起来撸一下Flex布局里面的那些属性
Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...
ReactNative之参照具体示例来看RN中的FlexBox布局
今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...
【分享】谈CSS3中display属性的flex布局
最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...
es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法响应式图像弹窗细节微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性参数传递的四种形式
es6 Object.assign 目录一.基本用法二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值三.浏览器支持 ES6 O ...

随机推荐

perl 如何匹配ASCII码以及ASCII码转换
匹配ASCII码: /[:ascii:]/ ASCII码转换为数字: ord() 数字转换为ASCII码: chr()
Struts2入门(四)——数据输入验证
一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...
重新诠释的OSGi规范
上周五部门开会讨论新一代产品(基于.net Winform)的设计规范,从设计规范慢慢讨论到体系结构等架构存在的问题,诸如菜单.工具条.状态条.界面布局等不能实现配置化和自动化,子系统之间拥有强依赖, ...
win10 安装visual studio 2015遇到的坑
最近win7系统不知啥原因无法访问域中的网络文件,打算升级到win10体验一下.结果发现这一路有太多的坑.首先安装win10基本上算顺利,但是当进入系统后,菜单模式对于PC的鼠标来说,用起来感觉不顺手 ...
Mac 下使用homebrew 安装node后全局安装找不到问题
Homebrew 是mac上的包管理工具,其官网: http://brew.sh/ 在使用brew安装node之后安装一些常见工具比如 gulp npm install -g gulp 提示安装成功之 ...
GreenDao2.2升级GreenDao3.0的适配之路
前言.为什么要升级到Greendao3.0? 1. 多人开发以往的数据库建表建Dao等操作要新开一个module,在统一的地方管理数据库建表,现在可以直接写Entity.多人开发时自己管自己的Ent ...
Json生成与解析
JSON常用与服务器进行数据交互,JSON中"{}"表示JSONObject,"[]"表示JSONArray 如下json数据: {"singers& ...
iOS版打地鼠游戏源码
打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...
（二）Spark-Linux环境准备-Java&Python版Spark
Spark-Linux环境准备视频教程: 1.优酷 2.YouTube 硬软件环境 1.虚拟机:VMware Workstation 12 2.虚拟机操作系统:RedHat5u4,单核,1G内存,2 ...
webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...

在移动端中的flex布局

flex布局介绍：

flex布局实例：

flex布局的其它css属性：

Flex 容器属性：

Flex 条目属性：

兼容：

参考：

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

随机推荐

热门专题

　　Flex 容器属性：

　　Flex 条目属性：