网格布局
就是用flex：1 将flex容器下面的元素进行等分的划分。
<style>
.box1,.box2,.box3{
display: flex;
}
.box1 div,.box2 div,.box3 div
{
flex:1;
background-color: palevioletred;
margin:10px 10px 0px 0px;/*顺时针的方向上右下左*/
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="item1">1/2</div>
<div class="item2">1/2</div>
</div>
<div class="box2">
<div class="item1">1/3</div>
<div class="item2">1/3</div>
<div class="item2">1/3</div>
</div>
<div class="box3">
<div class="item1">1/4</div>
<div class="item2">1/4</div>
<div class="item2">1/4</div>
<div class="item2">1/4</div>
</div>
</body>
</html>
Flex百分比布局
使用 flexbox 进行百分比布局是非常常见的一种方法，可以通过设置 flex 容器和 flex 项目的属性来实现。下面是一些常见的 flex 百分比布局技巧：
- 设置 flex 容器的宽度为百分比：可以使用 width: 100%; 或 max-width: 100%; 将 flex
容器的宽度设置为其父元素的宽度，从而使其自适应屏幕大小。 - 设置 flex 项目的百分比宽度：可以使用 flex-basis: x%; 将 flex
项目的宽度设置为相对于其父元素的百分比，这可以让 flex 项目自适应其父元素的宽度。 - 设置 flex 项目的 flex-grow 属性：使用 flex-grow 属性可以让 flex
项目根据其可用空间进行自适应放大，可以使用 flex-grow: 1; 或 flex-grow: x; 将 flex
项目的放大比例设置为相对于其他项目的百分比。 - 设置 flex 项目的 flex-shrink 属性：使用 flex-shrink 属性可以让 flex
项目根据其可用空间进行自适应缩小，可以使用 flex-shrink: 1; 或 flex-shrink: x; 将 flex
项目的缩小比例设置为相对于其他项目的百分比。
使用 flex 容器的 justify-content 和 align-items 属性：使用 justify-content 和 align-items 属性可以让 flex 容器中的项目相对于容器进行水平和垂直方向上的自适应布局，可以使用 justify-content: center; 和 align-items: center; 将项目居中显示。
<style>
.box1{
display: flex;
}
.item1{
/* flex-basis: 70%; */
flex:0 1 70%;
background-color: violet;
}
.item2{
flex:0 1 30%;
background-color: yellowgreen;
/* flex-basis: 30%; */
}
.box2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box2 div{
flex: 0 0 33%;
background-color: cadetblue;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<div class="item1">70%</div>
<div class="item2">30%</div>
</div>
<div class="box2">
<div class="item3">33</div>
<div class="item4">33</div>
<div class="item5">33</div>
<div class="item5">33</div>
<div class="item5">33</div>
<div class="item5">33</div>
</div>
</body>
圣杯布局
页面分为三个部分 头部中间{左边部分（固定） 中间宽度（弹性） 右边宽度（固定） } 底部
<style>
*{
padding: 0;
margin:0
}
.content{
display: flex;
flex-direction: column;
height: 100vh;
}
.header,.footer{
height: 50px;
background-color: bisque;
}
.main{
flex:1;
display: flex;
}
.left,.right{
flex-basis: 200px;
background-color: antiquewhite;
}
.center{
flex:1;
}
</style>
</head>
<body>
<div class="content">
<div class="header">头部</div>
<div class="main">
<div class="left">1</div>
<div class="center">2</div>
<div class="left">3</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>
Flex流式布局
不管放多少个（一行四个）后都会自动换行下一个。
<style>
.box{
display: flex;
width: 200px;
height: 200px;
background-color: beige;
flex-wrap: wrap;
align-content: flex-start;
}
.box div{
background-color: blueviolet;
border:2px solid black;
flex:0 1 25%;
height: 50px;
/* 默认情况下，元素的宽度和高度只包括内容区域的尺寸，
而当设置 box-sizing: border-box 时，
元素的宽度和高度包括内容区域、内边距和边框的尺寸。
这里这样做的好处是不用考虑边框宽度问题进行布局
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
