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. 只需三步：使用C# 操作 Azure 队列

    Step 1 : 安装windows Azure package Step 2 : 配置文件增加: <appSettings> <add key="StorageConne ...

  2. 部署 外网 ASP.NET程序时， IIS安全性 配置 -摘自网络

    最近,和朋友们在聊及ASP.NET程序的安全性没有JAVA高,IIS(Internet Infomartion Server)的存在很多漏洞(以及新型蠕虫,例如Code Red 和Nimda),安全得 ...

  3. HDU 3392 Pie(DP)

    题意:有一些男生女生,男生女生数量差不超过100 ,男生女生两两配对.要求求出一种配对方法,使每一对的高度差的和最小. 思路:(我是真的笨笨笨!!)设人少的一组人数为n,b[],人多的一组人数为m,g ...

  4. The Basics

    “Swift is a new programming language for iOS and OS X app development. Nonetheless, many parts of Sw ...

  5. JavaScript constructors, prototypes, and the `new` keyword

    Are you baffled(阻碍:使迷惑) by the new operator in JavaScript? Wonder what the difference between a func ...

  6. （一）Redis初学教程之安装篇

    1.下载windows下Redis服务安装程序(有32位的和64位的,识操作系统安装) 下载地址:https://github.com/dmajkic/redis/downloads 2.安装教程(详 ...

  7. mac下apache启动关闭操作

    1.一般的命令如下: 2.但是这种方法在mac上有的时候不生效 3.根据上面的提示使用下面的方法,可以生效,mac上很多应用都可以采用这种方式启动.关闭应用 sudo launchctl load / ...

  8. windows gui测试工具：AutoIt

    windows gui测试工具:AutoIt 2017-01-09 目录 1 简介2 示例1 记事本自动化操作3 示例2 上传文件 1 简介 返回 AutoIt v3 是用以编写并生成具有 BASIC ...

  9. windows 下安装elasticsearch

    1.下载 elasticsearch-2.3.3.zip 注意::elasticsearch 版本太高的话,java运行不起来 elasticsearch-1.5.2下载地址 http://downl ...

  10. 杀死当前Excel进程

    说明: 代码编写过程中,有时需要杀死当前Excel进程,而不影响其他Excel进程. 代码如下: 添加引用: //杀死当前进程的API引用 using System.Runtime.InteropSe ...