(八)布局

8.1 布局

布局是为了对整个网页进行排版，把网站内容安排在多个列中，用以丰富网页背景，色彩，内容等网页外观，就跟房子装修一样，我们需要把我们的房子装修漂漂亮亮的而且功能实用，总不能把床放在卫生间，把马桶放在燃气灶旁边吧

我么在制作前期需要对UI设计师提供的设计图片进行布局分析，明确那个模块在什么位置，我们需要通过布局将模块创建出来，放在它该有的位置上，然后对模块进行内容填充

8.2 入门布局–圣杯布局

入门图

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 auto;
        }
        .top{
            width: 100%;
            height: 80px;
            margin-bottom: 10px;
        }
        .middle{
            width: 100%;
            height: 500px;
            margin-bottom: 10px;
        }
        .middle div{
            float: left;
        }
        .middle div:nth-child(1),.middle div:nth-last-child(1){
            width: 30%;
            height: 100%;
            background-color: #339fff;
        }
        .middle div:nth-child(2){
            width: 40%;
            height: 100%;
            background-color: #2279ee;
        }
        .bottom{
            width: 100%;
            height: 80px;
        }
        .color1{
            background-color: #339fff;
        }

    </style>
</head>
<body>
    <!--顶部-->
    <div class="top color1"></div>
    <!--中部-->
    <div class="middle">
        <!--左-->
        <div></div>
        <!--中-->
        <div></div>
        <!--右-->
        <div></div>
    </div>
    <!--底部-->
    <div class="bottom color1"></div>
</body>
</html>

8.3 弹性布局

8.3.1 传统布局与弹性布局

传统布局方法遵循文档流的模式，依赖浮动，相较于一些特殊布局，不容易实现（如：垂直居中效果）
弹性布局诞生于2009年，弹性布局也称之为flex布局
弹性布局可以完整的响应式的实现各种页面布局

8.3.2 在使用弹性布局时需要知道的两个概念

容器：需要添加弹性布局的父元素
项目：弹性布局容器中的每一个子元素称之为项目

8.3.3 在使用弹性布局时需要了解的两个基本方向

主轴：在弹性布局中，需要通过样式属性去规定水平/垂直方向为主轴
交叉轴：与主轴垂直的另一个方向称之为交叉轴

8.3.4 弹性布局的使用步骤

给父元素添加display:flex/inline-flex来规定该容器为弹性布局显示，而不遵循常规的文档流模式
添加弹性布局的相关属性样式
注：当元素采用了弹性布局后，子元素的浮动会失效
入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            background-color: aqua;
        }
        .box div{
            width: 20%;
            height: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

配合display:flex使用的12个属性（6个容器属性，6个项目属性）

6个容器属性

1. flex-direction 改属性决定主轴的方向（表示在容器中项目的排列方向）

属性值	方向
row 默认值	主轴为水平方向，从父容器的左部开始渲染显示
row-reverse	主轴为水平方向，从父容器的右部开始渲染显示
column	主轴为垂直方向，从父容器的左上部开始渲染显示
column-reverse	主轴为垂直方向，从父容器的左下部开始渲染显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            background-color: aqua;
        }
        .box div{
            width: 20%;
            height: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

b. flex-wrap 项目的排列方式（默认情况下，所有项目都排列在一条轴线上）

属性值	作用
nowrap	不换行，当容器的宽度不够时，容器中的每个项目将会被挤压
wrap	换行，按项目的实际宽度执行排列，当容器宽度不够时自动换行，并且第一行在容器的最上方
wrap-reverse	换行，第一行在容器的最下方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
        }
        .box div{
            width: 20%;
            height: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>
    </div>
</body>
</html>

c. flex-flow:flex-direction flex-wrap

默认值为 flex-flow:row wrap

d. justify-content 定义了项目在主轴方向的对齐方式

属性	作用
flex-start	项目位于主轴的起点
flex-end	项目位于主轴的终点
center	居中对齐
space-between	两端对齐，项目间的间隔相等，开头项目和结束项目与容器两边没有间隔
space-around	两端对齐，项目间的间隔相等，开头项目和结束项目与容器两边有一定的间隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
        }
        .box div{
            width: 20%;
            height: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

e. align-items 交叉轴对齐方式

属性	作用
flex-start	交叉轴起点对齐
flex-end	交叉轴终点对齐
center	居中对齐
baseline	以项目的第一行文字为基线对齐，文字的行高，字体大小会直接影响后边的项目对齐
stretch	如果项目没有设置高度，则添加该属性后项目会占满整个容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*交叉轴对齐方式*/
            align-items: center;
            /*align-items: flex-end;*/
            /*align-items: stretch;*/
        }
        .box div{
            width: 20%;
            height: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*交叉轴对齐方式*/
            align-items: stretch;
        }
        .box div{
            width: 20%;
            /*没有高度*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 100px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*交叉轴对齐方式*/
            align-items: baseline;
        }
        .box div{
            width: 20%;
            height: 50%;
            background-color: red;
        }
        .big{
            font-size: 30px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="big">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

f. align-content 定义多根轴线的对齐方式，如果定义一根轴线则该属性不生效（不推荐出现多根轴线）

属性	作用
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴的两端对齐，轴线之间的间隔平均分布，开头和结束项目与容器没间隔
space-around	与交叉轴的两端对齐，轴线之间的间隔都相等
stretch	轴线占满整个交叉轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*多根轴线与交叉轴的对齐方式*/
            /*align-content: center;*/
            align-content: space-between;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .big{
            font-size: 30px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="big">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>
</body>
</html>

6个项目属性

1. order 定义项目排列的顺序，数值越小，排列越靠前，默认值为0，当添加了大于0的值后，该项目则不遵循文档流的排列方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*多根轴线与交叉轴的对齐方式*/
            /*align-content: center;*/
            align-content: space-between;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .big{
            font-size: 30px;
            line-height: 50px;
        }
        .orderStyle{
            order: 5;
        }
        .orderStyle1{
            order: 7;
        }
        .orderStyle2{
            order: 6;
        }
        .orderStyle3{
            order: 4;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="big orderStyle">1</div>
        <div>2</div>
        <div class="orderStyle1">3</div>
        <div>4</div>
        <div class="orderStyle2">5</div>
        <div>6</div>
        <div>7</div>
        <div class="orderStyle3">8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
</html>

b. flex-grow 用来定义项目的放大比例，默认为0，在为0的情况下，即使容器还有空间，项目也不会放大，当值大于零时容器还有空间余量的话则添加了该属性的项目会放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            /*flex-wrap: nowrap;*/
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*多根轴线与交叉轴的对齐方式*/
            /*align-content: center;*/
            align-content: space-between;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .big{
            font-size: 30px;
            line-height: 50px;
        }
        .orderStyle{
            order: 5;
            flex-grow: 2;
        }
        .orderStyle1{
            order: 7;
            flex-grow: 2;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="big orderStyle">1</div>
        <div>2</div>
        <div class="orderStyle1">3</div>
        <div>4</div>
    </div>
</body>
</html>

c. flex-shrink 定义项目是否可压缩，默认值为1，若空间不够，该项目将被缩小，如果其中某一个项目的值被设置为0，则它的空间不会被压缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            flex-wrap: nowrap;
            /*flex-wrap: wrap;*/
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*多根轴线与交叉轴的对齐方式*/
            /*align-content: center;*/
            align-content: space-between;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .fs{
            flex-shrink: 0;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="fs">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>
</body>
</html>

d. flex-basis 定义了项目占据主轴的空间（设置项目的宽度，当项目添加了该属性后，width会失效）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            flex-wrap: nowrap;
            /*flex-wrap: wrap;*/
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            /*多根轴线与交叉轴的对齐方式*/
            /*align-content: center;*/
            align-content: space-between;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .fs{
            flex-shrink: 0;
            flex-basis: 50%;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="fs">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>
</body>
</html>

e. align-self 设置某个项目在交叉轴上的对齐方式，其参数和align-items一致，当某个项目添加了该属性后，则会覆盖父容器上的align-itmes属性，其默认值为auto（表示继承父容器的align-itmes值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            /*规定容器*/
            display: flex;
            /*主轴*/
            flex-direction: row;
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/
            /*排列方式*/
            flex-wrap: nowrap;
            /*flex-wrap: wrap;*/
            /*flex-wrap: wrap-reverse;*/
            background-color: aqua;
            /*主轴对齐方式*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: space-around;*/
            justify-content: space-between;
            align-items: center;
        }
        .box div{
            width: 20%;
            height: 50px;
            background-color: red;
        }
        .fs{
            flex-shrink: 0;
            flex-basis: 50%;
            align-self: flex-end;
        }
        .as{
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="fs">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div class="as">7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

f. flex属性，该属性相当于flex-grow，flex-shrink，flex-basis的简写，默认值0,1 auto