Css布局模式 - leileigwl

[toc]

1.flex布局#

含义：Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

特点：任何一个容器都可以指定为 Flex 布局。

1
.box{
2
    display: flex;
3
}

作用：它的所有子元素自动成为容器成员，称为 Flex 项目

1.1容器属性#

1.1.1flex-direction#

表示主轴方向,有四种选项

row(默认) 从左向右排列，水平方向主轴

row-reverse 从右向左，水平方向主轴

column 从上往下，竖直方向主轴

column-reverse 从下往上，竖直方向为主轴

1.1.2flex-wrap#

如果本来的容器大小不够本元素放就会需要换行，但是默认不会换行

例：将原来的box容器width改成200,显然这个时候宽度不够放。默认就是nowrap不换行

而定义了flex-wrap属性后就会换行（这里为了美观将容器的width改成了100px）

1.1.3justify-content(重要)#

属性：

flex-start(默认):相当于就是左对齐

flex-end：右对齐

center：中间对齐

space-between（常用）：左边的靠左，右边的靠右，中间的居中

spcae-evenly：中间分配相等的空余空间

justify-content: center
justify-content: space-between
justify-content: space-evenly

1.1.4align-items#

align-items属性定义项目在交叉轴上如何对齐。(单根主轴的对齐)

属性

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-items
align-items
align-items(这个是将第一个元素的高度取消了固定值)

1.1.5 align-content(多根主轴的对其方式)#

如果没有设置这个属性，当元素多了之后的效果

属性：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

1.2 flex项目#

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1.2.1 order#

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

关于这个不是很实用，对应的元素顺序一般该在哪就放哪里去，别整花里胡哨

1.2.2 flex-grow#

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

1
.two {flex-grow: 1;}

参与比例分配，如果只是一个分配，就是直接按100%；

用途：用于处理横向的分布式布局十分好用

1.2.3 flex-shrink属性#

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

按比例收缩，不是很必要，要么换行就好，不同的元素多收缩容易出现比例很难调

1.2.4 align-self#

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

很少见：就相当于是只有一个特殊的需要调整

1
.two {flex-grow: 1;
2
    align-self: flex-end;
3
}

1.3flex实战小样-九宫格#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <style>
7
        body {
8
            display: flex;
9
            justify-content: center;
10
            align-items: center;
11
            min-height: 100vh;
12
        }
13
        .redpackage {
14
            width: 300px;
15
            height: 300px;
16
            outline: 1px solid black;
17
            display: flex;
18
            flex-wrap: wrap;
19
            justify-content: space-between;
20
            align-content: space-between;
21
        }
22
        .redpackage div {
23
            width: 33%;
24
            height: 33%;
25
            background: #e1544a;
26
            font-size: 32px;
27
            display: flex;
28
            justify-content: center;
29
            align-items: center;
30
            text-align: center;
31
            outline: 1px solid white;
32
            position: relative;
33
            z-index: 0;
34
        }
35
        .redpackage div:after {
36
            position: absolute;
37
            content: "";
38
            display: block;
39
            width: 80%;
40
            height: 80%;
41
            background: #ddbd84;
42
            border-radius: 50%;
43
            z-index: -1;
44
        }
45
    </style>
46
</head>
47
<body>
48
<div class="redpackage">
49
    <div>你</div>
50
    <div>有</div>
51
    <div>一</div>
52
    <div>个</div>
53
    <div></div>
54
    <div>红</div>
55
    <div>包</div>
56
    <div>未</div>
57
    <div>取</div>
58
</div>
59
</body>
60
</html>

2.grid布局#

注：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

2.1容器属性#

2.1.1grid-template-*#

设置网格#

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

简便写法：效果是一样的

1
grid-template-columns:repeat(3,100px);
2
grid-template-rows: repeat(4,100px);

auto-fill#

auto-fill,有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

1
grid-template-columns:repeat(auto-fill,100px);
2
grid-template-rows: repeat(auto-fill,100px);

基本就是自动填充，可以根据屏幕的长度拉伸

fr#

为了方便比例关系，这个是grid模型提供的关键字

1
grid-template-columns:repeat(3,1 fr);

minmax()#

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

1
grid-template-columns: 1 fr 1 fr minmax(100px, 1 fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

auto#

可以自动分配，跟flex模型的flex-grow有点像，但是更好用

1
grid-template-columns:100px auto 100px;
2
grid-template-rows: repeat(auto-fill,100px);

2.1.2gap#

项目相互之间的距离

row-gap:行距

column-gap:宽距

1
row-gap: 20px;
2
column-gap: 20px;

2.1.3area#

一个区域由单个或多个单元格组成，由你决定（具体使用，需要在项目属性里面设置）

设置区域：

1
grid-template-areas: 'a b c' 'd e f' 'g h i';
2
grid-template-areas: 'a a a' 'b b b' 'c c c';
3
grid-template-areas: 'a . c' 'b . f' 'g . i';

2.1.4 auto-flow#

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，

即先填满第一行，再开始放入第二行（就是子元素的排放顺序）

row(默认) 按照行排列

column 按照列排

2.1.5对其方式justify(重要)#

justify-items（水平）：容器内每一个元素的对其

align-items(竖直)：网格内每一个元素对其

justify-content：（水平）整个容器的对其

align-content：（竖直）整个容器的对其

2.2项目属性#

2.2.1 grid-column/row-start/end#

一句话解释：用来指定的items的具体位置，根据在哪根网格线

grid-column-start属性：左边框所在的垂直网格线

grid-column-end属性：右边框所在的垂直网格线

grid-row-start属性：上边框所在的水平网格线

grid-row-end属性：下边框所在的水平网格线

1
.item-1 {
2
    background-color: #ef342a;
3
    grid-column-start: 1;
4
    grid-column-end: 3;
5
}

简化写法：

1
.item-1 {
2
    background-color: #ef342a;
3
    grid-column: 1/3;
4
}

2.2.2 grid-area#

可以根据area改变区域

1
.item-1 {
2
    background-color: #ef342a;
3
    grid-column: 1/3;
4
    grid-area: b;
5
}

2.2.3justify-self(相当于一个个例)#

用法和flex浮动一样

justify-self属性设置单元格内容的水平位置（左中右)，跟justify-items属性的用法完全一致，但只作用于单个项目（水平方向）

align-self属性设置单元格内容的垂直位置（上中下)，跟align–items)属性的用法完全一致，也是只作用于单个项目（垂直方向）