🟡CSS布局

本文最后更新于：2024年4月25日 上午

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

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-direction和flex-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属性设为grid或inline-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-fill或repeat(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教程 (w3school)》

《常见 CSS 布局 (Cherry)》

《最强大的 CSS 布局 —— Grid 布局 (Gopal)》

《space-around space-evenly区别 (树欲静而风不止)》

《gap (grid-gap) (MDN)》

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