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

随机推荐

使用do{ } while(0)的好处
经常看到好多程序,尤其是linux相关的,使用do{}while(0)的写法,很明显内部程序最多只能执行一次,这样写的原因是什么呢?个人认为主要的原因是,如果不使用do{}while(0),那么当一个 ...
mysql中，sleep进程过多，如何解决？
睡眠连接过多,会对mysql服务器造成什么影响? 严重消耗mysql服务器资源(主要是cpu, 内存),并可能导致mysql崩溃. 造成睡眠连接过多的原因? 1. 使用了太多持久连接(个人觉得,在高并 ...
CSS代码规范
空格选择器与 { 之间必须包含空格. 列表型属性值书写在单行时,, 后必须跟一个空格. 属性名与之后的 : 之间不允许包含空格, : 与属性值之间必须包含空格. margin: 0; .+ ...
HTML的doctype和编码
DOCTYPE Doctype是为了告诉浏览器用哪种版本的html去解析指令,必须位于第一行,在某些版本中需要引入DTD,html5无需引入DTD 中文乱码原因浏览器解析代码的编码格式与源代码编码 ...
简述AOP编程
aop是面向切面编程的简称,对业务逻辑中的各个部分切割隔离,使耦合度降到最低,不仅增加了开发效率,还增强了系统的重用性和可维护性. 个人理解是把面向对象编程和面向函数编程结合在了一起. 说了这多的好处 ...
Visual Studio 生成事件命令
Visual Studio在生成项目工程前后,有时我们需要做一些特殊的操作,比如:拷贝生成的dll到指定目标下面等. 结合VS可以添加预先生成事件和后期生成事件,采用命令或bat批处理. 1.Visu ...
lucky 的时光助理（2）
lucky小姐说:昨天晚上他喝醉了,发消息说他想我了,说他后悔了. 我很惊讶. 我问lucky:你们很久都没有联系, 突然说... 你怎么想. 没错,'他'就是lucky的前男友. lucky看着我, ...
优化SQLServer--表和索引的分区(二)
简介之前一篇简单的介绍了语法和一些基本的概念,隔了一段时间,觉得有必要细致的通过实例来总结一下这部分内容.如之前所说,分区就是讲大型的对象(表)分成更小的块来管理,基本单位是行.这也就产生了很大优势 ...
无法安装Windows Live“OnCatalogResult:0x80190194”错误的解决方法
今天想安装一个博客客户端,结果安装一直报错"OnCatalogResult:0x80190194",百度查到了解决发放再此记录下来,以备后用. 到官网下载了一个在线安装程序,可是一 ...
Checkstyle：整洁你的代码
内容 Checkstyle简介下载 Checkstyle的几种使用方式 1) 与Ant结合使用 2) 通过CLI使用 3)在IDE上使用插件 4)在Maven上使用插件 Checkstyle配置配 ...

在移动端中的flex布局

flex布局介绍：

flex布局实例：

flex布局的其它css属性：

Flex 容器属性：

Flex 条目属性：

兼容：

参考：

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

随机推荐

热门专题

　　Flex 容器属性：

　　Flex 条目属性：