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. 在Eclipse中使用Maven插件 博客分类： Java相关技术

    简介 本文介绍如何在Eclipse中通过maven插件编写java项目和web项目. 安装Maven 下载Maven最新版本,见:maven.apache.org/download.html 当前版本 ...

  2. Codeforces Round #343 (Div. 2) D - Babaei and Birthday Cake 线段树+DP

    题意:做蛋糕,给出N个半径,和高的圆柱,要求后面的体积比前面大的可以堆在前一个的上面,求最大的体积和. 思路:首先离散化蛋糕体积,以蛋糕数量建树建树,每个节点维护最大值,也就是假如节点i放在最上层情况 ...

  3. 【Java基础】增强for循环要注意陷阱

    什么是增强for循环 增强for循环是一种简单模式的for循环,为了方便数组和集合的遍历而存在. int[] arr = new int[]{1, 2, 3, 4, 5, 6}; for (int a ...

  4. 【Java基础】Java中的多态

    什么是多态 多态是一个对象的多种实现,是建立在继承的基础上的,即对象“人”,有老师和学生不同的实现,其实总结起来就是允许将子类类型的指针赋值给父类类型的指针. 多态的发生条件 多态发生的前提是:1. ...

  5. 委托demo

    delegate bool Filter(string s); class test { static void Main() { Filter f=new Filter(A); Display(ne ...

  6. 问题.NET访问 IIS 元数据库失败。

    问题现象:访问 IIS 元数据库失败. 说明:执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.We ...

  7. 引入less报错解决方法以及浏览器设计不同的地方

    XMLHttpRequest cannot load file:///C:/Users/PAXST/Desktop/805/first.less. Cross origin requests are ...

  8. POJ 1657 Distance on Chessboard 简单的计算问题

    Distance on Chessboard Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23096   Accepted ...

  9. Spring Bean Scope 有状态的Bean 无状态的Bean

    http://blog.csdn.net/anyoneking/article/details/5182164 在Spring的Bean配置中,存在这样两种情况: <bean id=" ...

  10. tomcat热部署，更改java类不用重新加载context

    修改类后,tomcat热部署会重新加载整个项目的context,影响开发效率.网上查的大多数是将server的modules标签中Auto Reload项改为Disabled,但是没有效果. 使用以下 ...