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

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