全栈的自我修养 ———— css中常用的布局方法flex和grid

在项目里面有两种常用的主要布局:flex和grid布局（b站布局），今天分享给大家这两种的常用的简单方法！

• 一、flex布局
• • 1、原图
  • 2、中心对齐
  • 3、主轴末尾或者开始对其
  • 4、互相间隔
  • 二、grid布局
  • • 1、基本效果
    • 2、加间隔
    • 3、index.php/tags-41973.html" >���大某一个元素

      一、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是原来长度 */