🟡CSS布局

本文最后更新于:2022年4月8日 晚上

本节子元素均默认设有以下属性

1
2
3
4
5
6
div {
background: #787;
color: #fff;
margin: 5px;
padding: 10px 15px;
}

Flexbox布局

父容器属性

🍓display设置

将容器display属性设为flex(自动继承),容器成为一个Flex容器

1
2
3
div {
display: flex;
}

效果如下:

1
2
3
4

🍓flex-direction属性

该属性设置子元素的排列方向

📌row(默认)

1
2
3
4
div {
display: flex;
flex-direction: row;
}

效果如下:

1
2
3
4

📌row-reverse

1
2
3
4
div {
display: flex;
flex-direction: row-reverse;
}

效果如下:

1
2
3
4

📌column

1
2
3
4
div {
display: flex;
flex-direction: column;
}

效果如下:

1
2
3
4

📌column-reverse

1
2
3
4
div {
display: flex;
flex-direction: column-reverse;
}

效果如下:

1
2
3
4

🍓flex-wrap属性

该属性设置Flex容器子元素过多时是否换行

📌nowrap(默认)

1
2
3
4
5
div {
display: flex;
flex-wrap: nowrap;
max-width: 600px;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

📌wrap

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap;
max-width: 600px;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

📌wrap-reverse

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap-reverse;
max-width: 600px;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

🍓flex-flow属性

该属性简写flex-directionflex-wrap

1
2
3
4
5
6
7
8
9
10
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
/* 下面是等价写法 */
div {
display: flex;
flex-flow: column wrap;
}

🍓justify-content属性

该属性设置主轴轴线的排列方式

📌flex-start(默认)

1
2
3
4
div {
display: flex;
justify-content: flex-start;
}

效果如下:

1
2
3
4

📌flex-end

1
2
3
4
div {
display: flex;
justify-content: flex-end;
}

效果如下:

1
2
3
4

📌center

1
2
3
4
div {
display: flex;
justify-content: center;
}

效果如下:

1
2
3
4

📌space-around

1
2
3
4
div {
display: flex;
justify-content: space-around;
}

效果如下:

1
2
3
4

📌space-between

1
2
3
4
div {
display: flex;
justify-content: space-between;
}

效果如下:

1
2
3
4

🍓align-items属性

该属性用于设置交叉轴元素的排列方式

📌stretch(默认)

拉伸元素以填充空余(若元素尺寸固定则无效)

1
2
3
4
5
div {
display: flex;
align-items: stretch;
height: 100px;
}

效果如下:

1
2
3
4

📌flex-start

1
2
3
4
5
div {
display: flex;
align-items: flex-start;
height: 100px;
}

效果如下:

1
2
3
4

📌flex-end

1
2
3
4
5
div {
display: flex;
align-items: flex-end;
height: 100px;
}

效果如下:

1
2
3
4

📌center

1
2
3
4
5
div {
display: flex;
align-items: center;
height: 100px;
}

效果如下:

1
2
3
4

📌baseline

1
2
3
4
5
div {
display: flex;
align-items: baseline;
height: 100px;
}

效果如下(已设置不同的字体大小):

1
2
3
4

🍓align-content属性

该属性设置不同交叉轴的排列方式

📌stretch(默认)

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

📌flex-start

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

📌flex-end

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

📌center

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap;
align-content: center;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

📌space-between

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

📌space-around

1
2
3
4
5
div {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子元素属性

🍌order属性

该属性用于指定元素的排列顺序,若顺序重复则再按定义顺序排列(默认为0,顺序为定义顺序)

1
2
3
4
5
6
7
<div class="flexbox">
<!-- 已设置不同order -->
<div style="order: 4">1</div>
<div style="order: 1">2</div>
<div style="order: 0">3</div>
<div style="order: 1">4</div>
</div>

效果如下:

1
2
3
4

🍌flex-grow属性

该属性用于设置元素占取空余区域的相对大小(默认值为0,不拉伸)

1
2
3
4
5
6
<div class="flexbox">
<div style="flex-grow: 0">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 1.5">3</div>
<div style="flex-grow: 3">4</div>
</div>

动画效果如下:

1
2
3
4

🍌flex-shrink属性

该属性设置当空间不足时元素相对收缩的大小(默认为0)

1
2
3
4
5
6
<div class="flexbox">
<div style="width: 100px; flex-shrink: 0;">1</div>
<div style="width: 100px; flex-shrink: 1;">2</div>
<div style="width: 100px; flex-shrink: 1.5;">3</div>
<div style="width: 100px; flex-shrink: 3;">4</div>
</div>

动画效果如下:

1
2
3
4

🍌flex-basis

该属性设置元素主轴方向初始长度

1
2
3
4
5
6
<div class="flexbox">
<div style="flex-basis: 40px">1</div>
<div style="flex-basis: 50px">2</div>
<div style="flex-basis: 60px">3</div>
<div style="flex-basis: 70px">4</div>
</div>

效果如下:

1
2
3
4

🍌flex属性

flex-grow,flex-shrink,flex-basis的缩写

1
2
3
4
5
6
7
8
9
div {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 20px;
}
/* 等价缩写 */
div {
flex: 2 1 20px;
}

🍌align-self属性

对单个元素设置不同的align-items属性,单个元素的属性值与效果同align-items

Grid网格布局

网格容器

🍍创建grid

将元素display属性设为gridinline-grid

📌grid

1
2
3
div {
display: grid;
}

效果如下:

块级
1
2
3
4
网格

📌inline-grid

1
2
3
4
div {
display: inline-grid;
grid-template-columns: auto auto;
}

效果如下:

行内
1
2
3
4
网格

🍍grid-template-columns属性

该属性设置网格容器列数与各列的宽度

📌基础使用

auto为自动设置宽度(均分剩余空间)

1
2
3
4
div {
display: grid;
grid-template-columns: 50px 70px auto auto;
}

动画效果如下:

1
2
3
4
5
6
7
8

📌repeat()方法

repeat(n, value)重复n次

1
2
3
4
5
6
7
8
9
div {
display: grid;
grid-template-columns: 5px 5px auto auto auto;
}
/* 等价于 */
div {
display: grid;
grid-template-columns: repeat(2, 5px) repeat(3, auto);
}

使用auto-fill作为重复次数可自动重复最大次数

使用两次auo-fillrepeat(auto-fill, auto)会失败(只有一列)

1
2
3
4
div {
display: grid;
grid-template-columns: repeat(auto-fill, 60px);
}
1
2
3
4
5
6
7
8

📌fr单位

表示占余下空间的份额(占比=设置份额/总份额)

1
2
3
4
div {
display: gird;
grid-template-columns: 1fr 2fr 3fr 4fr;
}

动画效果如下:

1
2
3
4
5
6
7
8

🍍grid-template-rows

该属性设置网格容器行数与各行的高度,若元素多出则向下以auto行填充

grid-template-columns属性设置均可用于该属性

1
2
3
4
5
div {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50px 70px auto;
}

效果如下:

1
2
3
4
5
6
7
8

🍍justify-content属性

该属性设置各列的排列方式,宽度未设或过小时失效

📌space-evenly

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: space-evenly;
}

效果如下:

1
2
3
4
5
6
7
8

📌space-around

space-evenly的区别是:

space-evenly每个元素之间和外侧有一个空隙,两个相邻元素间有一个空隙

space-around每个元素两边有一个空隙,两个相邻元素间有两个空隙

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: space-around;
}

效果如下:

1
2
3
4
5
6
7
8

📌space-between

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: space-between;
}

效果如下:

1
2
3
4
5
6
7
8

📌start

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: start;
}

效果如下:

1
2
3
4
5
6
7
8

📌end

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: end;
}

效果如下:

1
2
3
4
5
6
7
8

📌center

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: center;
}

效果如下:

1
2
3
4
5
6
7
8

🍍align-content属性

该属性设置各行的排列方式,高度未设或过小时失效

📌space-evenly

1
2
3
4
5
6
div {
display: grid;
grid-template-columns: repeat(4, auto);
align-content: space-evenly;
height: 250px;
}

效果如下:

1
2
3
4
5
6
7
8

📌space-around

1
2
3
4
5
6
div {
display: grid;
grid-template-columns: repeat(4, auto);
align-content: space-around;
height: 250px;
}

效果如下:

1
2
3
4
5
6
7
8

📌space-between

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
align-content: space-between;
}

效果如下:

1
2
3
4
5
6
7
8

📌start

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
align-content: start;
}

效果如下:

1
2
3
4
5
6
7
8

📌end

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
align-content: end;
}

效果如下:

1
2
3
4
5
6
7
8

📌center

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(4, auto);
align-content: center;
}

效果如下:

1
2
3
4
5
6
7
8

🍍row-gap

设置行间距

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(3, auto);
row-gap: 30px;
}

效果如下:

1
2
3
4
5
6
7
8
9

🍍column-gap

设置列间距

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(3, auto);
row-gap: 50px;
}

效果如下:

1
2
3
4
5
6
7
8
9

🍍gap

行列间距缩写

1
2
3
4
5
div {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 30px 50px;
}

效果如下:

1
2
3
4
5
6
7
8
9

子元素设置

🥝grid-row

设置元素所占行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
.gridblock {
display: grid;
grid-template-columns: auto auto auto auto;
}

.item1 {
grid-row: 1 / 4;
}

.item2 {
grid-row: 1 / span 2;
}
</style>

<div class="gridblock">
<div class="item1">1</div>
<div class="item2">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>

效果如下:

1
2
3
4
5
6
7

🥝grid-column

设置元素所占列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
.gridblock {
display: grid;
grid-template-columns: auto auto auto auto;
}

.item1 {
grid-column: 1 / 5;
}

.item2 {
grid-column: 1 / span 3;
}
</style>

<div class="gridblock">
<div class="item1">1</div>
<div class="item2">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>

效果如下:

1
2
3
4
5
6
7

🥝grid-area

📌gird-row与grid-column缩写

1
2
3
4
5
6
7
8
.item1 {
grid-row: 1 / 3;
grid-column: 2 / span 3;
}
/* 等价缩写 */
.item2 {
grid-area: 1 / 2 / 3 / span 3;
}

效果如下:

class="item1"
2
3
4
5
6
7


class="item2"
2
3
4
5
6
7

📌命名区域

grid-template-areas在父容器中命名区域(.表示没有名字的单元)

grid-area使用命名的区域

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
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, auto);
grid-template-areas: 'header header header header'
'. main main aside'
'. main main aside'
'footer footer footer footer';
}
header {
grid-area: header;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
</style>
<body class="grid">
<header>我是Header</header>
<div>未命名的区域1</div>
<div>未命名的区域2</div>
<main>我是Main</main>
<aside>我是Aside</aside>
<footer>我是Footer</footer>
</body>

效果如下:

我是Header
未命名的区域1
未命名的区域2
我是Main
我是Aside
我是Footer

Float布局


🟡CSS布局
https://qingshaner.com/CSS布局/
作者
清山
发布于
2022年2月17日
许可协议