CSS3.0 常用布局方案

素颜马尾好姑娘i 2022-05-01 12:02 145阅读 0赞

### 一、水平居中 ###

#### (1) 任意个子元素（元素节点和文本节点） ####

#parent{
        display: flex;
        justify-content: center;
    }
    复制代码

### 二、垂直居中 ###

#### (1) 任意个子元素横向排列 ####

#parent{
        display: flex;
        align-items: center;
    }
    
    或
    
    #parent{
        display: flex;}
    #son{
        align-self: center;}
    
    或
    /*原理：这个尚未搞清楚，应该是flex使margin上下边界无限延伸至剩余空间并平分了*/
    #parent{
        display: flex;}
    #son{
        margin: auto 0;}
    复制代码

#### (2) 任意个子元素纵向排列 ####

#parent{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    复制代码

### 三、水平垂直居中 ###

#### (1) flex实现 ####

#parent{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    或
    
    #parent{
        display: flex;
        justify-content: center;
    }
    #son{
        align-self: center;
    }
    
    或
    
    /*多个子元时造成分散排列*/
    #parent{
        display: flex;
    }
    #son{
        margin: auto;
    }
    复制代码

#### (2) 视窗居中 ####

#son{
        /*0如果去掉，则会多出滚动条并且上下都是50vh的margin。如果去掉就给body加上overflow:hidden;*/
        margin: 50vh auto 0;  
        transform: translateY(-50%);
    }
    复制代码

### 四、两列布局 ###

#### 4.1 左列定宽，右列自适应 ####

##### (1) flex实现 #####

html代码:

<div id="parent">
        <div id="left">左列定宽</div>
        <div id="right">右列自适应</div>
    </div>
    复制代码

css代码:

#parent{
        width: 100%;
        height: 500px;
        display: flex;
    }
    #left {
        width: 100px;
        background-color: #f00;
    }
    #right {
        flex: 1; /*均分了父元素剩余空间*/
        background-color: #0f0;
    }
    复制代码

##### (2) grid实现 #####

#parent {
        width: 100%;
        height: 500px;
        display: grid;
        grid-template-columns: 100px auto;  /*设定2列就ok了,auto换成1fr也行*/
    }
    #left {
        background-color: #f00;
    }
    #right {
        background-color: #0f0;
    }
    复制代码

#### 4.2 一列不定、一列自适应 ####

同4.1，flex去除固定宽度，grid改宽为auto即可

### 五、全屏布局 ###

#### (1) flex实现 ####

html代码:

<div id="parent">
        <div id="top">top</div>
        <div id="middle">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div id="bottom">bottom</div>
    </div>
    复制代码

css代码:

*{
        margin: 0;
        padding: 0;
    }
    html,body,#parent{
        height:100%;
    }
    #parent {
        display: flex;
        flex-direction: column;
    }
    #top {
        height: 100px;
    }
    #middle {
        flex: 1;
        display: flex;
    }
    #middle > .left {
        width: 200px;
    }
    #middle > .right {
        flex: 1;
        overflow: auto;
    }
    #bottom {
        height: 50px;
    }
    复制代码

#### (2) Grid实现 ####

html代码:

<div id="parent">
        <div id="top">top</div>
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="bottom">bottom</div>
    </div>
    复制代码

css代码:

*{
        margin: 0;
        padding: 0;
    }
    html, body, #parent {
        height: 100%;
    }
    #parent {
        width: 100%;
        height: 100%;
        display: grid;
        /*分成2列,第一列宽度200px,第二列1fr平分剩余的部分,此处换成auto也行*/
        grid-template-columns: 200px 1fr;
        /*分成3行,第一行高度100px,第二行auto为自适应,此处换成1fr也行,第3行高度为50px*/
        grid-template-rows: 100px auto 50px;
        /*定义网格区域分布*/
        grid-template-areas:
            "header header"
            "aside main"
            "footer footer";
    }
    #parent>div{
        border: 1px solid #000;
    }
    #top{
        grid-area: header;  /*指定在哪个网格区域*/
    }
    #left{
        grid-area: aside;  /*指定在哪个网格区域*/
    }
    #right{
        grid-area: main;  /*指定在哪个网格区域*/
    }
    #bottom{
        grid-area: footer;  /*指定在哪个网格区域*/
    }
    复制代码

转载于:https://juejin.im/post/5cf0a607e51d457778117336