[2020-08-10]css3中的常用几种布局

div的水平垂直居中

• flex布局，使用display: flex实现水平垂直居中

        display: flex;
        align-items: center; 
        justify-content: center; 

• grid布局

    display: grid;
    place-items: center;

使用grid布局只需要两行代码就行，比flex省掉一行，其实place-items是一个简写模式,相当于

place-items: <align-items> <justify-items>;

• 使用css的transform
  在父元素上设置position: relative,然后在子元素设置

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

其它的用table布局这些我没有怎么用到过

两栏式布局

image.png

        .container {
            display: grid;
           grid-template-columns: minmax(150px, 25%) 1fr;
        }

其中rid-template-columns: minmax(150px, 25%) 1fr表示分成两列，第一列的宽度最小为150，最大为父级宽度的25%， 第二列宽度自适应。如果要分成三列就这样rid-template-columns: minmax(150px, 25%) 150px 1fr,以此类推

页面上下布局

Header Main Footer布局

image.png

        .container {
            display: grid;
            width: 100%;
            grid-template-rows: minmax(150px, 25%) 150px 1fr;
            height: 500px;
            border: 1px solid #ddd;
            /* place-items: center; */

        }

grid-template-rows表示行布局，后面每个参数表示每个元素的高度