CSS 常见布局方案

[xianzou]

CSS 常见布局方案

本文转载自掘金木羽™的前端那些事儿」③ CSS 布局方案，并加上一些自己的注释，请关注原作者。 原文地址：https://juejin.im/post/5bd805e6f265da0acd2107d7；

1.水平居中

inline-block + text-align

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

table + margin

.child{
    display: table;
    margin: 0 auto;
}

absolute + transform

.parent{
    position: relative;
    height:1.5em;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

定宽(兼容性最好)

.parent{
    position: relative;
    height:1.5em;
}
.child{
    position: absolute;
    width:100px;
    left: 50%;
    margin-left:-50px;
}

flex + justify-content

.parent{
    display: flex;
    justify-content: center;
}
.child{
    margin: 0 auto;
}

2、垂直

table-cell + vertial-align

.parent{
    display: table-cell;
    vertical-align: middle;
}

absolute + transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

flex + align-items

.parent{
    display: flex;
    align-items: center;
}

3、水平垂直

inline-block + table-cell + text-align + vertical-align

.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

absolute + transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

flex

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

多列布局

1、一列定宽，一列自适应

float + margin(左侧定宽)

.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}

float + overflow（左侧不固定宽度）

.left{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

table布局(实现登高布局)

.parent{
    display: table; width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

flex

.parent{
    display: flex;
}
.left{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}

2、多列定宽，一列自适应

float + overflow

.left,.center{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

table

.parent{
    display: table; width: 100%;
    table-layout: fixed;
}
.left,.center,.right{
    display: table-cell;
}
.right{
    width: 100px;
    padding-right: 20px;
}

flex

.parent{
    display: flex;
}
.left,.center{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}

3、一列不定宽，一列自适应

float + overflow

html

<div class="parent">
    <div class="left">
        <p>这是左边的内容，可以根据内容的多少来撑开left的宽度</p>
    </div>
    <div class="right">
        right
    </div>
</div>

css

.left{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
/*设置.left元素下面的内容,实际情况可以根据内容来撑开，不需要使用width，这里只做展示*/
/**.left p{width: 200px;}**/

table

.parent{
    display: table; width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}
.left p{width:200px;} /** 必须要设置宽度，这里根据内容的多少来修改p标签的宽度 */

flex

.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}
/*设置.left元素下面的内容,实际情况可以根据内容来撑开，不需要使用width，这里只做展示*/
.left p{width: 200px;}

4、多列不定宽，一列自适应

float + overflow

.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
/*设置.left元素下面的内容,实际情况可以根据内容来撑开，不需要使用width，这里只做展示*/
.left p,.center p{
    width: 100px;
}

flex

.parent{
    display: flex;
}
.left,.center{
    margin-right: 20px;
}
.right{
    flex: 1;
}
/*设置.left元素下面的内容,实际情况可以根据内容来撑开，不需要使用width，这里只做展示*/
.left p,.center p{width: 200px;}

5、等分

float + margin

.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;/*这里需要设置盒子模型*/
}

table + margin

.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;
}

flex

.parent{
    display: flex;
}
.column{
    flex: 1;
}
/**
    element+element 选择器,
    element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素
    选择.column紧跟的.column 
**/
.column+.column{
    margin-left:20px;
}

6、等高

float + overflow

解释：

• 实现方法

  • 给需要等高布局的元素用padding-bottom来填充，然后用margin-bottom来消除padding-bottom带来的影响，然后给父元素定义overflow:hidden；

• 实现原理

  • 等高布局实现的原理是用最大高度的元素来撑高其他元素；
  • 给父元素定义的overflow:hidden出发了BFC或hasLayout，因此浮动元素的高度也应被计算在父元素中，同时overflow:hidden把超出父元素的部分隐藏；
  • 由于父元素的高度被撑到最大高度的子元素的高度，则相对较矮的元素的元素则会用padding-bottom来补偿这部分的高度差；
  • 由于背景可以显示在padding中，而且border也跟随padding变化，于是成功完成了一个障眼法。

• 备注

  • padding-bottom和margin-bottom应设置得足够大。

.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left; width: 100px;
}
.right{
    overflow: hidden;
}

table

.parent{
    display: table; 
    width: 100%;
}
.left{
    display:table-cell; 
    width: 100px;
    margin-right: 20px;
}
.right{
    display:table-cell; 
}

flex

.parent{
    display:flex;
    width: 100%;
}
.left{
    width: 100px;
}
.right{
    flex:1;
}

并排等分，单排对齐靠左布局

flex

.main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.item {
    display: inline-block;
}
.empty{
    height: 0;
    visibility: hidden;
}