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. Kafka系列(二)特性和常用命令

    Kafka中Replicas复制备份机制 kafka将每个partition数据复制到多个server上,任何一个partition有一个leader和多个follower(可以没有),备份的个数可以 ...

  2. Spring笔记(二)Core层

    Spring用一种非入侵的方式来管理程序,模块结构图如下:   .Core层 IOC(控制反转):应用本身程序不负责依赖对象的创建及维护,依赖对象的创建及维护有外设容器负责,即:IOC: DI(依赖注 ...

  3. cygwin设置中文

    cygwin\home\username\.bashrc # 让ls和dir命令显示中文和颜色 alias ls='ls --show-control-chars --color' alias dir ...

  4. 全英文版时间格式化07/29/2010 4:14:01 PM

    之前格式化,AM PM出不来,总是显示上午 下午 aspx页面的绑定: <%#Eval("AddDate") == DBNull.Value ? "" : ...

  5. hdoj 3849 By Recognizing These Guys, We Find Social Networks Useful【双连通分量求桥&&输出桥&&字符串处理】

    By Recognizing These Guys, We Find Social Networks Useful Time Limit: 2000/1000 MS (Java/Others)     ...

  6. 转储指定的数据块并查看TRC信息

    1.转储指定的块:需要两个信息:文件号和块号 BYS@bys1>alter system dump datafile 1 block 100; System altered. 2.定位找出use ...

  7. Java时间转换类实现

    Java时间类型非常的差,首先版本问题,本人使用java在Android平台开发.很多Data类的方法已经不提倡使用,一个时间,居然要使用Calendar.DateFormat等类共同编码,非常麻烦. ...

  8. NGUI 3.5教程（六）Font字体

    字体是UI很重要的一部分.今天用NGUI 3.5,制作一下字体. 以下是我做的一个射击游戏的DEMO.子弹数量,就使用了NGUI的字体显示.效果例如以下: 步骤: 1,寻找(或者制作)字体.我这里图方 ...

  9. [ES6] 22. Const

    'const' keyword is for creating a read only variable, something you can never change once created. ' ...

  10. cocosbuilder中的Callbacks和sound effects

    cocosbuilder3中有增加了 Callback和sound effects 的timeline 这个东西用来在动画播放过程中控制音效和回调动作,非常方便 按住option键(alt), 点击t ...