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;
        }

示例

  <style>
        .box {
            width: 800px;
            height: 800px;
            background-color: green;
        }
        .item1{
            width: 300px;
            height: 200px;
            background:yellow;
        }
        .item2{
            width: 200px;
            height: 300px;
            background:red;
        }
   </style>

水平布局

<div class="box flex-row">
    <div class="item1"></div> <!-- 黄 -->
    <div class="item2"></div> <!-- 红 -->
</div>

image.png

垂直布局

<div class="box flex-col">
    <div class="item1"></div> <!-- 黄 -->
    <div class="item2"></div> <!-- 红 -->
</div>

image.png

两边排列

<div class="box justify-between">
    <div class="item1"></div> <!-- 黄 -->
    <div class="item2"></div> <!-- 红 -->
</div>

image.png

居中

<div class="box flex-center">
    <div class="item1"></div> <!-- 黄 -->
    <div class="item2"></div> <!-- 红 -->
</div>

image.png

居中+纵向

<div class="box flex-center flex-col">
    <div class="item1"></div> <!-- 黄 -->
    <div class="item2"></div> <!-- 红 -->
</div>

image.png

重叠 居中

<div class="box flex-center stacked">
    <div class="item1 absolute"></div> <!-- 黄 -->
    <div class="item2 absolute"></div> <!-- 红 -->
</div>

image.png

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

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