介绍

在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。

新旧版本的弹性盒子模型
在之前，css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言，旧版本的内容与新版本还是有些出入。而且，从功能上来讲，旧版本的弹性盒子模型远远没有新版本的盒子模型强大，从兼容性来讲，二者在pc端ie9以下都存在着兼容性问题，但是在移动端，旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说，我们依然要将主要的精力放在新版本的弹性盒子模型的身上，因为旧版本的弹性盒子模型淘汰是必然，随着手机端的兼容性逐渐提升，旧版本必将被淘汰。另外，新版本具有更加强大的功能，也值得我们进行深度的学习。那么我们对于新旧两个版本的弹性盒子模型，我们只需要抱着对比的心态学习即可，掌握新版本，了解旧版本，这样即使有一天我们需要使用旧版本，也可以非常容易的学习旧版本的弹性盒子模型。

相关概念

  • 主轴

我们以元素排在一行为例，当元素排列在一行的时候，主轴既表示元素排列的方向，横向排列则主轴即可以理解为一条横线，又因为我们元素默认是从左向右排列，那么我们可以说在默认的情况下，元素的主轴的起始位置是在左，而方向为右，终点也为右。

  • 侧轴

元素垂直的方向即为侧轴。默认上为起点，下为终点。

  • 弹性容器

我们想要使用弹性盒子模型，就需要将容器转换为弹性容器，我们说一个包含于子元素的容器设置了display:flex，那么这个容器也就变成了弹性容器。

  • 弹性子元素

当子元素的父元素变成了弹性容器，那么其中的所有的子元素也自然而然的变成了弹性子元素。

如何创建一个弹性容器：

　　　　display:flex | inline-flex

弹性容器属性

  • flex-direction

弹性容器中子元素的排列方式(主轴排列方式)
        属性值：
            row:默认在一行排列
            row-reverse:反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
            column：纵向排列。
            column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flex-direction</title>

    <style>

        html,body {

            margin:0;

            padding:0;

        }

        nav {

            height: 500px;

            background-color: lightcyan;

            display: flex;

            flex-direction: row-reverse;/*居左1234 变成居右4321*/

            flex-direction: column;/*居左1234变成上下1234*/

            flex-direction: column-reverse;/*变成下上1234*/

        }

        nav div {

            width: 100px;

            height: 100px;

            background-color: lightblue;

            line-height: 100px;

            text-align: center;

            font-weight: bold;

            margin-right: 10px;

        }

    </style>

</head>

<body>

<nav>

    <div class="d1">1</div>

    <div class="d2">2</div>

    <div class="d3">3</div>

    <div class="d4">4</div>

</nav>

</body>

</html>
  • flex-wrap

设置弹性盒子的子元素超出父容器时是否换行
        属性值：
            nowrap: 默认值。规定元素不拆行或不拆列。
            wrap:规定元素在必要的时候拆行或拆列。
            wrap-reverse:规定元素在必要的时候拆行或拆列，但是以相反的顺序。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flex-wrap</title>

    <style>

        .box {

            height: 600px;

            background-color: lightgoldenrodyellow;

            display: flex;

            /*设置了属性为wrap，那么一行放不下的时候会自动的去下一行*/

            /*flex-wrap:wrap;*/

            /*设置了属性为wrap-reverse会让排序发生一个反转，虽然同样是多行，但是会变成从下到上*/

            flex-wrap: wrap-reverse;

        }

        .box div {

            width: 100px;

            height: 100px;

            background-color: lightblue;

            line-height: 100px;

            text-align: center;

            font-weight: bold;

            margin: 10px;

        }

    </style>

</head>

<body>

<div class="box">

    <!--此时元素如果不换行，那么当一行的整体放不下时，每个元素就会相应的缩小-->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

</div>

</body>

</html>
  • flex-flow

flex-direction 和 flex-wrap 的简写

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flex-wrap</title>

    <style>

        .box {

            height: 600px;

            background-color: lightgoldenrodyellow;

            display: flex;

            flex-flow: row wrap;

        }

        .box div {

            width: 100px;

            height: 100px;

            background-color: lightblue;

            line-height: 100px;

            text-align: center;

            font-weight: bold;

            margin: 10px;

        }

    </style>

</head>

<body>

<div class="box">

    <!--此时元素如果不换行，那么当一行的整体放不下时，每个元素就会相应的缩小-->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

    <div>7</div>

    <div>8</div>

    <div>9</div>

</div>

</body>

</html>
  • align-item

设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
        相关属性值：
            flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
            flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
            center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
            baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>align-item</title>

    <style>

        .box {

            height: 600px;

            background-color: lemonchiffon;

            display: flex;

            /*默认 侧轴起点横向排列*/

            /*align-items: flex-start;*/

            /*侧轴终点横向排列*/

            /*align-items: flex-end;*/

            /*侧轴终点横向排列*/

            /*align-items: center;*/

            align-items: baseline;

        }

        .box div{

            width: 100px;

            height: 100px;

            background-color: lightsalmon;

            text-align: center;

            line-height: 100px;

            font-weight: bold;

            margin:10px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

    </div>

</body>

</html>
  • align-content

修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐(行与行的对其方式).
        相关属性：
            flex-start： 没有行间距
            flex-end： 底对齐没有行间距
            center ：居中没有行间距
            space-between：两端对齐，中间自动分配
            space-around：自动分配距离
        请注意本属性在只有一行的伸缩容器上没有效果。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>align-content</title>

    <style>

        nav {

            height: 600px;

            background-color: lemonchiffon;

            display: flex;

            /*开启多行*/

            flex-wrap: wrap;

            /*侧轴起点上下两行对齐，没有行间距*/

            /*align-content: flex-start;*/

            /*侧轴终点上下两行对齐，没有行间距，第一行依然在上*/

            /*align-content: flex-end;*/

            /*侧轴终点对齐，第一行依然在上，没有行间距*/

            /*align-content:center;*/

            /*两端对齐，中间自动分配*/

            /*align-content: space-between;*/

            /*自动分配距离*/

            align-content:space-around;

        }

        nav div {

            width: 100px;

            height: 100px;

            background-color: lightcoral;

            margin:10px;

        }

    </style>

</head>

<body>

    <nav>

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>6</div>

        <div>7</div>

        <div>8</div>

        <div>9</div>

        <div>10</div>

        <div>11</div>

        <div>12</div>

        <div>13</div>

    </nav>

</body>

</html>
  • justify-content

设置弹性盒子元素在主轴（横轴）方向上的对齐方式
        相关属性：
            flex-star：t默认，顶端对齐
            flex-end：末端对齐
            center：居中对齐
            space-between：两端对齐，中间自动分配
            space-around：自动分配距离

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>justify-content</title>

    <style>

        nav {

            height: 600px;

            background-color: lightgoldenrodyellow;

            display: flex;

            /*justify-content: flex-start;*/

            /*主轴对齐，贴右 1234*/

            /*justify-content: flex-end;*/

            /*主轴对齐，居中*/

            /*justify-content: center;*/

            /*两端对齐，中间自动分配*/

            /*justify-content: space-between;*/

            /*自动分配距离*/

            justify-content: space-around;

        }

        nav div {

            width: 100px;

            height: 100px;

            background-color: lightblue;

            margin:10px;

        }

    </style>

</head>

<body>

<nav>

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div>5</div>

    <div>6</div>

</nav>

</body>

</html>

弹性子元素属性

  • order

设置弹性盒子的子元素排列顺序。 number排序优先级，数字越大越往后排，默认为0，支持负数。

  • flex-grow

设置或检索弹性盒子元素的扩展比率。
        属性值:int

  • flex-shrink

设置或检索弹性盒子元素的收缩比率。
        属性值:int

  • flex-basis

用于设置或检索弹性盒伸缩基准值。
        属性值:int

  • flex

设置弹性盒子的子元素如何分配空间
        是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

  • align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。
        值与容器属性一样，只是这个是单独的设置某个元素。

CSS3中的弹性盒子模型的更多相关文章

  1. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  2. 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...

  3. css3弹性盒子模型之box-flex

    css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...

  4. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  5. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  6. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  7. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

  8. CSS box-flex属性，然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

  9. 弹性盒子模型属性之flex-grow

    在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!今天就让我们先来看看flex-grow这个属性 flex-g ...

随机推荐

  1. JMETER - BEANSHELL获取响应结果

    获取响应结果 添加后置处理器     //获取获取请求的返回值 String response = prev.getResponseDataAsString(); //日志打印获取请求的返回值 log ...

  2. linux centos添加yum镜像

    下载配置文件,加入/etc/yum.repos.d/阿里镜像:http://mirrors.aliyun.com/repo/Centos-7.repo网易镜像:http://mirrors.163.c ...

  3. C# windows窗口应用程序切换主界面的显示内容

    不知道说清楚没有?就是我的窗口分为两部分,左边,控制部分,由一些按钮组成右边,显示部分,由些控件(如下拉,文本等等组成) 左边的每个按钮对应显示部分的页面,也就是说,左边换一个按钮点,那么右边就显示其 ...

  4. div 上禁止复制的css实现方法

    div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-se ...

  5. xiugai完了

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  6. noi.ac #712 练级

    分析 把船当作点 练级当作边 发现一个连通块大于n-1的边的条数的奇偶性影响这个连通块的答案 于是并查集维护即可 代码 #include<bits/stdc++.h> using name ...

  7. 535D Tavas and Malekas

    题目大意 给你一个串和m个下标 问你一个长度为n的串每一个下标开始的后缀的前缀都包含给定的串的方案数 分析 对于给定的串求出z数组 对于两个串不重叠的情况就是中间都不包含的数随便填即可 对于重叠的情况 ...

  8. UML 类图快速入门

    UML 图形 官方定义 UML 类图(Class Diagram) UML 时序图(Sequence Diagram) 领域 UML 类图和实现 UML 类图 领域 UML 类图 实现 UML 类图 ...

  9. 把Notepad++的tab设置为四个空格

    在7.1版本以及以后 设置->首选项->Language 勾选Repalce by space 在7.1版本以前 设置->首选项->制表符设置 右侧,转为空格,勾选上 参考: ...

  10. Jenkins持续集成_01_Mac安装配置

    前言 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件.在自动化测试中,用来持续集成,跑定时任务进行定时自动化监测.更详细介绍可查看jenkins官网: ...