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. SignalR Supported Platforms -摘自网络

    SignalR is supported under a variety of server and client configurations. In addition, each transpor ...

  2. 问题.NET--win7 IIS唯一密钥属性“VALUE”设置为“DEFAULT.ASPX”时,无法添加类型为“add”的重复集合

    问题现象:.NET--win7 IIS唯一密钥属性“VALUE”设置为“DEFAULT.ASPX”时,无法添加类型为“add”的重复集合 问题处理: 内容摘要:    HTTP 错误 500.19 - ...

  3. Properties操作

    import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream; ...

  4. 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错

    做足准备工作之后进行安装oracle,运行runInstall的时候别的时候输出如下错误 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错.请确保此目录是可写 ...

  5. POJ 2728 Desert King

    Description David the Great has just become the king of a desert country. To win the respect of his ...

  6. java中通过反射获取方法并且调用(getMethod和invoke深入)实践

    为了支持业务的快速变更,往往采用可配置的方式,将业务逻辑的处理部分配置在数据库中或者XMl文件里.配置什么,如何配置才更灵活,That's a problem. 以数据库配置为例(xml相同),在数据 ...

  7. Moq4在.NET3.5和.NET4版本之间的差异

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Moq4在.NET3.5和.NET4版本之间的差异.

  8. [Openstack][Grizzly] Mysql删除僵尸实例

    由于某些原因,导致在通过nova delete删除虚拟机后,其task_state 一致处于deleting状态, 但是始终无法删除.由于虚拟机还没有分配到节点等信息,还没有拷贝镜像,所以可以直接从数 ...

  9. Java-日历表

    效果图 import java.util.*; import java.text.*; class demo { public static void main(String[] args) { // ...

  10. 【转】Spring的WebServiceTemplate访问WebService的方法及其本质原理

    WebService客户端调用的本质就是将SAOP格式的XML通过通信协议发送到WebService的服务器端,然后接收服务器端返回的XML. 本文简单介绍一下如何通过Spring提供的WebServ ...