display: block;         /* 块级元素，独占一行 */
display: inline;        /* 行内元素，和其他元素在一行显示 */
display: inline-block;  /* 行内块元素，可设置宽高 */
display: none;          /* 隐藏元素，不占空间 */

display: flex;
flex-direction: row;          /* 主轴横向（默认） */
flex-direction: column;       /* 主轴纵向 */

justify-content: flex-start;    /* 左对齐 */
justify-content: center;        /* 居中 */
justify-content: flex-end;      /* 右对齐 */
justify-content: space-between; /* 两端对齐，间距相等 */
justify-content: space-around;  /* 元素两侧有相等间距 */

align-items: flex-start;  /* 顶部对齐 */
align-items: center;      /* 垂直居中 */
align-items: flex-end;    /* 底部对齐 */

align-content: flex-start;     /* 顶部对齐 */
align-content: space-between;  /* 两端对齐 */
align-content: space-around;   /* 间距相等 */

flex: 1;  /* 占用剩余空间 */

gap: 10px;  /* 子元素间距 */

display: grid;
grid-template-columns: repeat(3, 1fr);     /* 3列，等宽 */
grid-template-columns: 100px 200px 300px;  /* 3列，指定宽度 */
grid-template-rows: repeat(3, 1fr);        /* 3行，等高 */
grid-template-rows: 100px 100px 300px;     /* 3行，指定高度 */
grid-auto-rows: 100px;    /* 自动生成行的高度 */
gap: 10px;                /* 行列间距 */