在项目里面有两种常用的主要布局:flex和grid布局（b站布局），今天分享给大家这两种的常用的简单方法！
- 一、flex布局
- 1、原图
- 2、中心对齐
- 3、主轴末尾或者开始对其
- 4、互相间隔
- 二、grid布局
- 1、基本效果
- 2、加间隔
- 3、放大某一个元素
一、flex布局
1、原图
2、中心对齐
display: flex; /* flex布局 *//* flex-direction: row flex默认的 */justify-content: center; /* 主轴方向上对其 */align-items: center; /* */
3、主轴末尾或者开始对其
display: flex;justify-content: flex-end; /* flex-start */align-items: center;
4、互相间隔
display: flex;justify-content: space-around /* 两遍不留间隔 : space-between */;align-items: center;
二、grid布局
1、基本效果
display: grid;grid-template-columns: repeat(5,1fr); 一行五个，第二个参数是大小可以选择填写px等
2、加间隔
gap加间隔！
.layout{width: 70vw;height: 70vh;background-color: white;box-shadow: 1px 1px 10px rgba(117, 115, 115,0.5);display: grid;grid-template-columns: repeat(5,1fr);gap: 20px;padding: 20px;}
3、放大某一个元素
grid-row: 1/3; /* 小于等于1/2是原来长度 */grid-column: 1/3; /* 小于等于1/2是原来长度 */
