CSS3.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