介绍

在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. 转义字符\e

    Windows 平台下,conio.h 中有许多操作控制台颜色.格式的函数.但是再 Linux 平台下却没有类似的函数.经过在网上的一番搜索,找到了解决此问题的方法——转义字符\e.注意,\e这种写法 ...

  2. Vue.js 技术揭秘学习 （3） render

    Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node  ,返回的是一个VNode 在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createE ...

  3. Linux下统计当前文件夹下的文件个数

    Linux下统计当前文件夹下的文件个数 √ ls -l |grep "^-"|wc -l

  4. Git常用命令的操作

    Git命令 一.创建版本库 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git add <file>,注意,可反复多次使用,添加多个文件: 使 ...

  5. linux常用基本命令 grep awk 待优化

    查看centos操作系统版本:cat /etc/centos-release 切换到当前用户主目录:cd 或者cd ~ 创建文件夹/a/b/c:mkdir -pv /a/b/c.如果/a/b/c的父目 ...

  6. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  7. luogu P4103 [HEOI2014]大工程 虚树 + 树形 DP

    Description 国家有一个大工程,要给一个非常大的交通网络里建一些新的通道.  我们这个国家位置非常特殊,可以看成是一个单位边权的树,城市位于顶点上.  在 2 个国家 a,b 之间建一条新通 ...

  8. Slide Window 专题

    992. Subarrays with K Different Integers 给定一个正整数数组,计算刚好有K个不同数的子数组的个数.(For example, [1,2,3,1,2] has 3 ...

  9. luogu P1020 导弹拦截 x

    首先上题目~ luogu P1020 导弹拦截 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都 ...

  10. Windows定时任务+bat文件+WinRar处理Mysql数据库的定时自动备份

    服务器环境 Windows Server 2003 ,服务器上采用的是IIS+mysql的集成工具phpStudy.MySQL的安装目录D:\phpStudy4IIS , WinRAR 安装目录 C: ...