css 常见布局

1. 横向排列

         /*水平布局控件*/
        .flex-row {
            display: flex;
            flex-direction: row;
        }

2.纵向排列

        /*垂直布局控件*/
        .flex-col {
            display: flex;
            flex-direction: column;
        }

3.两边排列

        /*两边布局*/
        .justify-between {
            display: flex;
            justify-content: space-between;
        }

4.居中排列

        .flex-center {
            display:flex;
            justify-content:center;
            align-items:center;
        }

5.重叠布局

        /*居中重叠 子元素需要 遵从.absolute*/
        .stacked {
            position: relative;
        }
        .absolute {
            position: absolute;
        }

示例

水平布局

image.png

垂直布局

image.png

两边排列

image.png

居中

image.png

居中+纵向

image.png

重叠 居中

image.png

justify-content:center; 水平居中
align-items:center;垂直居中

可以按需设置 需要什么方向居中