弹性布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

Flex容器

display（必备定义弹性布局）

定义：用来定义弹性布局

属性值作用
-webkit-flex在webkit内核的浏览器上使用要加前缀
flex将对象作为弹性伸缩盒显示
inline-flex将对象作为内联块级弹性伸缩盒显示

flex-direction

定义：用来规定灵活项目的方向

属性值作用
row默认,灵活的项目将水平显示，正如一个行一样
row-reverse与 row 相同，但是以相反的顺序
column灵活的项目将垂直显示，正如一个列一样
column-reverse与 column 相同，但是以相反的顺序
initial设置该属性为它的默认值
inherit从父元素继承该属性

flex-wrap

定义：规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

属性值作用
nowrap默认,规定灵活的项目不拆行或不拆列
wrap规定灵活的项目在必要的时候拆行或拆列
wrap-reverse规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序
initial设置该属性为它的默认值
inherit从父元素继承该属性

flex-flow

此属性是 flex-direction 和 flex-wrap 属性的复合属性

定义：用来设置或检索弹性盒模型对象的子元素排列方式

属性值作用
flex-direction此属性的值都可以使用
flex-wrap此属性的值都可以使用
initial设置该属性为它的默认值
inherit从父元素继承该属性
1
2
{display: flex;
    flex-flow: row wrap;}

justify-content

定义：用来设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

属性值作用
flex-start默认,从行首起始位置开始排列
flex-end从行尾位置开始排列
center居中排列
space-between均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
space-evenly均匀排列每个元素，每个元素之间的间隔相等
space-around均匀排列每个元素，每个元素周围分配相同的空间
initial设置该属性为它的默认值
inherit从父元素继承该属性

align-items

定义：flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

属性值作用
stretch默认,元素被拉伸以适应容器（如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制）元素位于容器的中心。
center弹性盒子元素在该行的侧轴（纵轴）上居中放置（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
flex-start元素位于容器的开头,弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end元素位于容器的结尾,弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
baseline元素位于容器的基线上,如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐
initial设置该属性为它的默认值
inherit从父元素继承该属性

align-content

定义：用来在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）

属性值作用
stretch默认,元素被拉伸以适应容器
center元素位于容器的中心
flex-start元素位于容器的开头
flex-end元素位于容器的结尾
space-between元素位于各行之间留有空白的容器内
space-around元素位于各行之前、之间、之后都留有空白的容器内
initial设置该属性为它的默认值
inherit从父元素继承该属性

Flex子项目

order

定义：用来设置或检索弹性盒模型对象的子元素出现的順序

属性值作用
number默认值是 0。规定灵活项目的顺序
数字设置该属性为它的默认值
inherit从父元素继承该属性

flex-grow

定义：用来设置或检索弹性盒子的扩展比率

属性值作用
number默认值是 0。一个数字，规定项目相对于其他灵活的项目进行扩展的量
数字设置该属性为它的默认值
inherit从父元素继承该属性

flex-shrink

定义：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

属性值作用
number默认值是 1,一个数字，规定项目将相对于其他灵活的项目进行收缩的量
数字设置该属性为它的默认值
inherit从父元素继承该属性

flex-basis

定义：用来设置或检索弹性盒伸缩基准值

属性值作用
number一个长度单位或者一个百分比，规定灵活项目的初始长度
auto默认，长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定
initial设置该属性为它的默认值
inherit从父元素继承该属性

align-self

定义：用来定义flex子项单独在侧轴（纵轴）方向上的对齐方式

属性值作用
auto默认，元素继承了它的父容器的 align-items 属性，如果没有父容器则为 “stretch”
stretch元素被拉伸以适应容器
center元素位于容器的中心
flex-start元素位于容器的开头
flex-end元素位于容器的结尾
baseline元素位于容器的基线上
initial设置该属性为它的默认值
inherit从父元素继承该属性

网格布局

这是一个二维系统，这意味着它可以同时处理列和行,与 flex 弹性布局有相似之处理，都是由父容器包含多个项目元素的使用

声明容器

块级容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
    <style>
        .demo {
            height: 200px;
            width: 400px;
            border: solid 10px red;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }

        .demo div {
            margin: 10px;
            border: solid 5px #dfc;
        }
    </style>
    陈若
    <div class="demo">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

行级容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
    <style>
        .demo {
            height: 200px;
            width: 400px;
            border: solid 10px red;
            display: inline-grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }

        .demo div {
            margin: 10px;
            border: solid 5px #dfc;
        }
    </style>
    陈若
    <div class="demo">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

划分行列

栅格有点类似表格，也 行 和 列，使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数

固定宽度

1
2
3
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;

百分比

可以使用使用百分比自动适就容器

1
2
3
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25% 25%;

重复设置

使用 repeat 统一设置值，第一个参数为重复数量，第二个参数是重复值

1
2
3
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(4, 25%);

自动填充

自动填充是根据容器尺寸，自动设置元素尺寸

1
2
3
4
5
height: 200px;
width: 400px;
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(auto-fill, 100px);

比例划分

使用 fr 单位设置元素在空间中所占的比例

单位组合
1
2
3
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 3fr 2fr;
重复组合
1
2
3
display: grid;
grid-template-columns: repeat(2, 1fr 2fr);
grid-template-rows: repeat(2, 3fr 2fr);

自动空间

使用auto关键词

1
2
3
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px auto;

组合定义

1
grid-template: 50px auto / 100px auto;

minmax()

使用 minmax 方法可以设置取值范围

1
grid-template: 50px auto / 100px minmax(100px, 200px) 100px;

间距定义

行间距

row-gap

定义行间距

1
2
grid-template: 1fr 2fr / 1fr 2fr;
row-gap: 20px;

列间距

column-gap

定义列间距

1
2
grid-template: 1fr 2fr / 1fr 2fr;
column-gap: 20px;

组合定义

gap

可以一次定义行、列间距，如果间距一样可以只设置一个值

1
2
grid-template: 1fr 2fr / 1fr 2fr;
gap: 20px 10px;

元素定位

样式属性作用
grid-row-start行开始栅格线
grid-row-end行结束栅格线
grid-column-start列开始栅格线
grid-column-end列结束栅格线

上面几个样式属性可以使用以下值

属性值作用
Line栅格络
span 数值栅格包含的栅格数量
span 区域名称栅格包含到指定的区域名称
auto自动设置，默认为一个网格宽度和高度

数值可以是正数和负数

根据偏移量

使用 span 可以设置包含栅格的数量或包含到的区域名称

属性作用
grid-row-end:2向下包含 2 行
grid-row-start:2向上包含 2 行
grid-column-end:2向右包含 2 行
grid-column-start:2向左包含 2 行

简写模式

可以使用 grid-row 设置行开始栅格线，使用 grid-column 设置结束栅格线

1
2
grid-row: 2/4;
grid-column: 2/4;

grid-area

更加简洁是同时对 grid-row 与 grid-column 属性的组合声明

语法
1
grid-area:grid-row-start/grid-column-start/grid-row-end/grid-column-end

区域声明

区域是由多个单元格构成，使用 grid-template-areas可以定义栅格区域，并且栅格区域必须是矩形的

区域布局

区域占位

使用一个或多个 连续的. 定义区域占位

简写形式

使用 grid-template 进行栅格划分会更简洁

语法

1
2
3
4
grid-template:
     '栅格名称 栅格名称 栅格名称 栅格名称' 行高
     '栅格名称 栅格名称 栅格名称 栅格名称' 行高
     '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽

栅格流动

在容器中设置grid-auto-flow 属性可以改变单元格排列方式

属性值作用
column按列排序
row按行排列
dense元素使用前面空余栅格

强制填充

当元素在栅格中放不下时，将会发生换行产生留白，使用grid-auto-flow: row dense; 可以执行填充空白区域操作

对齐管理

可以通过属性方便的定义栅格或元素的对齐方式

属性作用
justify-content所有栅格在容器中的水平对齐方式，容器有额外空间时
align-content所有栅格在容器中的垂直对齐方式，容器有额外空间时
align-items栅格内所有元素的垂直排列方式
justify-items栅格内所有元素的横向排列方式
align-self元素在栅格中垂直对齐方式
justify-self元素在栅格中水平对齐方式

栅格对齐

justify-content 与 align-content 用于控制栅格的对齐方式，比如在栅格的尺寸小于容器的心里时，控制栅格的布局方式

justify-content 属性值

属性值作用
start容器左边
end容器右边
center容器中间
stretch撑满容器
space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly栅格间距离完全平均分配

align-content 属性值

属性值作用
start容器顶边
end容器底边
center容器垂直中间
stretch撑满容器
space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间
space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍
space-evenly栅格间距离完全平均分配

栅格水平与垂直居中对齐的示例

1
2
3
4
5
6
7
8
width: 600px;
height: 600px;
border: solid 3px red;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
justify-content: center;
align-content: center;

元素对齐

justify-items 与 align-items 用于控制所有栅格内元素的对齐方式

justify-items 用于控制元素的水平对齐方式

属性值作用
start元素对齐栅格的左边
end元素对齐栅格的右边
center元素对齐栅格的中间
stertch水平撑满栅格

align-items 用于控制元素的垂直对齐方式

属性值作用
start元素对齐栅格的顶边
end元素对齐栅格的底边
center元素对齐栅格的垂直中间
stretch垂直撑满栅格

将元素在所在栅格中水平、垂直居中的示例

1
2
3
4
5
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
justify-items: center;
align-items: center;

元素独立控制

justify-self 与 align-self 控制单个栅格内元素的对齐方式，属性值与 justify-items 和 align-items 是一致的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {
    width: 600px;
    height: 600px;
    border: solid 3px red;
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 200px 200px;
}

div {
    background-clip: content-box;
    border: solid 2px red;
    padding: 10px;
    box-sizing: border-box;
    justify-self: end;
    align-self: center;

}

组合简写

place-content

用于控制栅格的对齐方式，语法如下：

1
place-content: <align-content> <justify-content>

place-items

控制所有元素的对齐方式，语法结构如下：

1
place-items: <align-items> <justify-items>

place-self

控制单个元素的对齐方式

1
place-self: <align-self> <justify-self>

终级简写

grid 是简写属性，可以用来设置：

  • 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，
  • 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，
  • 间距属性 grid-column-gap 和 grid-row-gap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<body>
    <style>
        .demo {
            height: 300px;
            width: 600px;
            display: grid;
            background-color: #2196f3;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 1fr);
        }

        .demo2 {
            font-size: 2em;
            padding: 0 auto;
            text-align: center;
            background-color: #d3eafd;
            margin: 10px;
            padding-top: 20px;
        }

        .demo11 {
            grid-column: 1/ span 5;
        }

        .demo12 {
            grid-row: 2/span 5;
        }

        .demo13 {
            grid-column: 2/ 4;
        }

        .demo14 {
            grid-column: 4/ span 5;
        }

        .demo15 {
            grid-column: 2/ span 5;
            grid-row: 3/span 4;
        }
    </style>
    <div class="demo">
        <div class="demo2 demo11">头部</div>
        <div class="demo2 demo12">菜单</div>
        <div class="demo2 demo13">主要内容区域</div>
        <div class="demo2 demo14">右侧</div>
        <div class="demo2 demo15">底部</div>
    </div>
</body>

网格布局小游戏