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 ...

随机推荐

超越 JSON: Spearal 序列化协议简介
Spearal 是一个新的开源的序列化协议,这个协议旨在初步替换JSON 将HTML和移动应用连接到Java的后端. Spearal的主要目的是提供一个序列协议,这个协议即使是在端点间传输的复杂的 ...
ASP.NET用QQ,网易发送邮件以及添加附件
教程:ASP.NET用QQ,网易发送邮件以及添加附件这是我用QQ邮箱出现的异常: 命令顺序不正确. 服务器响应为:Error: need EHLO and AUTH first !无法从传输连接中读 ...
理解RESTful架构
越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...
开始我的IT博客之旅
这是一个好的开始,过程很漫长,但我却乐在其中. 在大学之际,这是我的又一个开始,随便写点啦. 想把每一次的过程记录下来这样以后对自己对别人都会有所帮助. 好啦作为一名大三的学生党加油吧!
Access提示“操作必须使用一个可更新的查询”的解决办法
问题:软件工程师开发了一个asp.net+access网站,本地调试增.删.改和查都没有异常.部署到服务器windows2008 R2的IIS上运行后,查询没有异常.可是在修改操作提交时,产生异常:提 ...
View and Data API Tips: Constrain Viewer Within a div Container
By Daniel Du When working with View and Data API, you probably want to contain viewer into a <div ...
二维码合成，将苹果和安卓（ios和android）合成一个二维码，让用户扫描一个二维码就可以分别下载苹果和安卓的应用
因为公司推广的原因,没有合适的将苹果和安卓(ios和android)合成一个二维码的工具. 因为这个不难,主要是根据浏览器的UA进行判断,所以就自己开发了一个网站网站名称叫:好推二维码 https ...
ffmpeg 安装，转视频格式为m3u8，压缩视频
# ffmpegffmpeg 安装,转视频格式为m3u8,压缩视频 ## ffmpeg 安装直接安装: apt-get install ffmpeg 运行 `ffmpeg` 看是否出现版本号以判断是否 ...
yii2实战教程之新手入门指南-简单博客管理系统
作者:白狼出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...
读取properties配置文件的方法
一般在.properties文件中配置数据库连接的相关信息,我们需要从中读取信息,以便建立与数据库的连接. 文件目录: application.properties配置信息: url=jdbc:ora ...

在移动端中的flex布局

flex布局介绍：

flex布局实例：

flex布局的其它css属性：

Flex 容器属性：

Flex 条目属性：

兼容：

参考：

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

随机推荐

热门专题

　　Flex 容器属性：

　　Flex 条目属性：