首页 > > 网页制作 > css >

CSS3中的弹性盒子模型

2019-08-26 05:48:38来源：博客园阅读 ()

CSS3中的弹性盒子模型

介绍

在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>