CSS3.0 經常使用佈局方案

1、水平居中

(1) 任意個子元素（元素節點和文本節點）

#parent{
    display: flex;
    justify-content: center;
}
複製代碼

2、垂直居中

(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;
}
複製代碼

3、水平垂直居中

(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、兩列布局

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便可

5、全屏佈局

(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;  /*指定在哪一個網格區域*/
}
複製代碼