1. Can I Use?

2. 概念:

当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。 

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style>

    ul {

        /* display: flex; */

        display:-webkit-box;

        width: 50%;

        margin: 0 auto;

        border:1px solid #ccc;

    }

    li {

        padding: 5px 0;

        list-style: none;

       /*  flex: 1;    *表示子元素之间平均分配 */

        -webkit-box-flex: 1; /* 兼容性写法 */

        text-align: center;

    }

    ul li:first-child{

        border-right: 1px solid #ccc;

    }

    </style>

</head>

<body>

    <ul>

        <li>区域1</li>

        <li>区域2</li>

    </ul>

</body>

</html>

3.flex 不等宽布局

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style>

        .container{

            display:flex;

            display:-webkit-flex;

        }

        .container section{

            border: 1px solid #bc223d;

        }

        .initial{

            flex:initial;

            -webkit-flex:initial;

            width: 200px;

            min-width: 100px;

        }

        .none{

            flex:none;

            -webkit-flex:none;

            width: 200px;

        }

        .flex1{

            flex:1;

            -webkit-flex:1;

        }

        .flex2{

            flex:2;

            -webkit-flex:2;

        }

    </style>

</head>

<body>

    <section class="container">

        <section class="initial">

            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>

        </section>

        <section class="none">

            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>

        </section>

        <section class="flex1">

            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>

        </section>

        <section class="flex2">

            <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>

        </section>

    </section>

</body>

</html>

4.居中布局

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <style>

        .container{

            display:flex;

            display:-webkit-flex;

            border:2px solid #bc223d;

            width: 500px;

            height: 250px;

        }

        .content{

            border:1px solid #ccc;

            background: #bc223d;

            width:100px;

            height:50px;

            margin: auto;

        }

    </style>

</head>

<body>

    <section class="container">

        <section class="content"></section>

    </section>

</body>

</html>

5.属性详解

  • box-align: start|end|center|baseline|stretch(子元素拉伸撑满)
    • 定位子元素,纵向位置
  • box-pack: start|end|center|justify
    • 规定当框大于子元素尺寸的时候,如何放置子元素,规定了水平框中的水平位置,垂直框中的垂直位置
  • box-direction:normal|reserve(反向)|inherit
    • 规定子元素排列的方向

Flexbox盒子弹性布局的更多相关文章

  1. 潜入FLEXBOX——CSS弹性布局

    介绍 Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求.本文将详细介绍新近稳定化的Flexbox语法.浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您 ...

  2. C3盒子弹性布局

    有效的对一个容器中的子元素进行排列.对齐和分配空白空间. 对浏览器版本要求较高,多用于移动端的响应式设计 flex-direction 顺序指定了弹性子元素在父容器中的位置. flex-directi ...

  3. React Native 弹性布局FlexBox

    React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the f ...

  4. CSS3中的Flexbox弹性布局（一）

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

  5. 【RN - 基础】之FlexBox弹性布局

    前言 弹性盒模型(The Flexible Box Module),又叫FlexBox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同的屏幕,为盒装模型提供最大的灵活 ...

  6. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  7. css3 FlexBox 弹性布局

    Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...

  8. flexbox（弹性盒布局模型）,以及适用场景

    一.是什么 Flexible Box 简称 flex,意为"弹性布局",可以简便.完整.响应式地实现各种页面布局 采用Flex布局的元素,称为flex容器container 它的所 ...

  9. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

随机推荐

  1. Java笔记(五)……运算符

    算术运算符 算术运算符的注意问题: 如果对负数取模,可以把模数负号忽略不记,如:5%-2=1.但被模数是负数就另当别论. 对于除号"/",它的整数除和小数除是有区别的:整数之间做除 ...

  2. iOS版 feedly 无法使用gmail账户的解决办法

    印象中很长时间以来,iOS版 Feedly 总是使用不了gmail账户,原因就在于打不开登录界面.但奇怪的是在PC上又正常……非常无语!手机和PC真是两个不同的世界啊 其它RSS阅读软件不是收费,就是 ...

  3. normalization归一化

    简单的举个例子:一张表有两个变量,一个是体重kg,一个是身高cm.假设一般情况下体重这个变量均值为60(kg),身高均值为170(cm).1,这两个变量对应的单位不一样,同样是100,对于身高来说很矮 ...

  4. Esper系列(七)数据缓存、外部事件应用（静态方法）

    LRU Cache 功能:最近最少使用策略. 数据库查询缓存应用配置: 1  ); 12          } 13          return bean; 14      }    15  } ...

  5. aix 扩展文件系统

    今天发现公司的oracle测试 数据库不能启动,检查警告日志日志,提示归档空间不足,不能归档,于是扩展文件系统: 1.检查rootvg卷组的剩余空间[p2704u]:[/dsg/oracle11]$ ...

  6. (android 源码下开发应用程序) 如何在 Android 各 level ( 包含 user space 與 kernel space ) 使用dump call stack的方法

    http://janbarry0914.blogspot.com/2014/07/androiddump-call-stack.html dump call stack [文章重點] 了解 Andro ...

  7. linux c 及 c++打印调用者函数caller function的方法，包括arm c平台

    一般情况下,编译的时候可能需要加 -g 选项,对于android ndk的-g选项添加请参见android类目下的另一篇文章. 以下文章中的__builtin_return_address() 宏,若 ...

  8. MSSQL效率优化随记

    1.尽量不要在where中进行计算,尤其是需要遍历的情况原来代码,执行大约40秒 INSERT INTO @TransferCode ( PROXY_NO, TING_NO, WTotal, BTot ...

  9. Yii框架入门教程（博客教程、权威指南、类手册）

    http://www.yiichina.com/ http://www.yiiframework.com/doc/blog/1.1/zh_cn/start.overviewhttp://www.yii ...

  10. 问题-delphi 程序在某电脑中显示？？？问号 乱码

    问题现象:delphi 程序在某电脑中显示???问号 乱码 问题原因:因为语言的原因.不同的国家可能显示的编码不一样. 问题处理:“控制面板”>“区域和语言选项”>“区域选项”>“标 ...