流式布局

# 定义

很简单字面意思，流式布局就是像瀑布一样，是往下的，所以我们在布局的时候宽度都不会写固定值，用百分比，而高度写固定值

例子

<template>
<section>
  <div></div>
  <div></div>
</section>
</template>
<script>
export default {
  data() {
    return {
      msg:'woshinidebbnishiwodenana'
    };
  },
  setup() {},
};
</script>
<style>
section{
  width: 100%;
}
section div{
  float: left;
  width: 50%;
  height: 400px;
  box-sizing: border-box;
  border: 2px solid white;

}
section div:first-child{
  background-color: red;
}
section div:nth-child(2){
  background-color: green;
}
</style>

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

最后不管你的屏幕宽度怎么变，两个盒子都是各占一半，高度永远是400px

这就是流式布局

# 限制尺寸

因为可以无限拖动，但我们不想让它随意缩放，这里就可以设置最大和最小值来限定它的变化

section{
  width: 100%;
  max-width: 980px;
  min-width: 320px;
}

1
2
3
4
5

当超出这个范围将不会再次缩放

编辑

上次更新: 2021/08/13, 23:21:49

← 3D转换 flex布局→