1. 两边固定，中间自适应，如果缩放，中间会变成一列排布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
#div1 {
height: 100%;
width: 200px;
}
#div3 {
height: 100%;
width: 200px;
}
#div2 {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
#div4 {
background-color: blue;
flex-grow: 1;
min-width: 250px;
}
#div5 {
background-color: red;
flex-grow: 1;
min-width: 250px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<div id="div1" style="background: rosybrown;">1111</div>
<div id="div2" style="background: royalblue;">
<div id="div4">2-11</div>
<div id="div5">2-22</div>
</div>
<div id="div3" style="background: burlywood;">3333</div>
</body>
</html>
一些长宽不一样的元素，让它们尽量撑满一行，撑不下就换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
span {
flex-grow: 1;
margin: 10px;
}
span:nth-child(2n) {
background: #eee;
border: 2px solid black;
}
span:nth-child(2n + 1) {
background: yellow;
border: 2px solid red;
}
</style>
</head>
<body>
<span style="width: 120px">1</span>
<span style="width: 100px">2</span>
<span style="width: 80px">3</span>
<span style="width: 20px">4</span>
<span style="width: 300px">5</span>
<span style="width: 100px">6</span>
<span style="width: 40px">7</span>
<span style="width: 20px">8</span>
<span style="width: 50px">9</span>
<span style="width: 70px">10</span>
<span style="width: 30px">11</span>
</body>
</html>
不同尺寸显示不同列数元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
margin: 10px;
box-sizing: border-box;
display: inline-block;
width: 31%;
}
@media screen and (max-width: 300px) {
div {
width: 100%;
}
}
@media screen and (max-width: 800px) {
div {
width: 50%;
}
}
/* @media screen and (max-width: 1280px) {
div {
width: 33%;
}
} */
div:nth-child(2n) {
background: #eee;
border: 2px solid black;
}
div:nth-child(2n + 1) {
background: yellow;
border: 2px solid red;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</body>
</html>
纯CSS实现瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.masonry {
column-count: 3;
column-gap: 0;
}
@media screen and (max-width: 800px) {
.masonry {
column-count: 2;
column-gap: 0;
}
}
@media screen and (max-width: 600px) {
.masonry {
/*分成几列*/
column-count: 1;
/*间隔大小*/
column-gap: 0;
}
}
.item {
/*设置瀑布流的关键，设置中断点*/
break-inside: avoid;
box-sizing: border-box;
padding: 10px;
}
#content1 {
width: 200px;
height: 200px;
background-color: yellow;
margin: 10px 10px;
}
#content2 {
width: 200px;
height: 350px;
background-color: green;
margin: 10px 10px;
}
#content3 {
width: 200px;
height: 150px;
background-color: yellow;
margin: 10px 10px;
}
#content4 {
width: 200px;
height: 200px;
background-color: green;
margin: 10px 10px;
}
</style>
</head>
<body>
<div class="masonry">
<div class="item">
<div class="item__content" id="content1">
</div>
</div>
<div class="item">
<div class="item__content" id="content2">
</div>
</div>
<div class="item">
<div class="item__content" id="content3">
</div>
</div>
<div class="item">
<div class="item__content" id="content4">
</div>
</div>
<!-- more items -->
</div>
</body>
</html>
利用flex模仿实现左右浮动的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.class1 {
display: flex;
justify-content: space-between;
}
.class2 {
width: 20px;
height: 20px;
background-color: antiquewhite;
text-align: left;
}
.class3 {
width: 20px;
height: 20px;
background-color: pink;
text-align: right;
flex: 1;
font-size: 0;
}
.class4 {
display: inline-block;
width: 20px;
height: 20px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="class1">
<div class="class2"></div>
<div class="class3">
<div class="class4"></div>
<div class="class4"></div>
</div>
</div>
</body>
</html>
常见居中的话可以用flex或者grid，设置justify-content, alitem-center 为center然后居中。
