专业的网站建设服务交易平台,wordpress分类数据库参数,免费网址注册,北京网站设计精选柚v米科技在项目里面有两种常用的主要布局:flex和grid布局#xff08;b站布局#xff09;#xff0c;今天分享给大家这两种的常用的简单方法#xff01; 一、flex布局1、原图2、中心对齐3、主轴末尾或者开始对其4、互相间隔 二、grid布局1、基本效果2、加间隔3、放大某一个元素 一、… 在项目里面有两种常用的主要布局: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是原来长度 */
