background

Layout is inevitable in our front-end development, simple recall CSS layout scheme for your reference and their own reference.

Centered layout

The center layout here assumes variable widths, including fixed widths.

Horizontal center

  1. inline-block + text-align
.parent {

    text-align: center;

}



.child {

    display: inline-block;

}

Copy the code

IE567 does not support inline-block, so you need to use CSS hack for compatibility.

  1. table + margin
.child {

    display: table;

    margin: 0 auto;

}

Copy the code

This solution is compatible with IE8 and can be used

  1. absolute + transform
.parent {

    position:relative;

Height: 1.5 em.

}

.child {

    position:absolute;

    left:50%;

    transform:translateX(-50%);

}

Copy the code

This scheme is compatible with IE9 because of transform compatibility. If.child is a fixed-width element, you can use the following notation to improve compatibility.

.parent {

    position: relative;

Height: 1.5 em.

}

.child {

    position: absolute;

    width:100px;

    left:50%;

    margin-left:-50px;

}

Copy the code
  1. flex + justify-content
.parent {

    display:flex;

    justify-content;

}

.child {

    margin:0 auto;

}

Copy the code

The Flex layout is powerful, but limited by compatibility. Do not consider compatible can be used boldly.

Vertically centered layout

  1. table-cell + vertial-align
.parent {

    display: table-cell;

    vertical-align: middle;

}

Copy the code

This scheme can be used

  1. absolute + transform
.parent {

    position: relative;

}

.child {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

}

Copy the code

The new cSS3 properties are not very compatible.

  1. flex + align-items
.parent {

    display: flex;

    align-items: center;

}

Copy the code

Compatibility is not very good and does not consider older browsers.

Horizontal and vertical center

  1. inline-block + table-cell + text-align + vertical-align
.parent{

 text-align: center;

 display: table-cell;

 vertical-align: middle;

}

.child{

 display: inline-block;

}

Copy the code

Compatible to IE8.

  1. absolute + transform
.parent{

 position: relative;

}

.child{

 position: absolute;

 left: 50%;

 top: 50%;

 transform: translate(-50%,-50%);

}

Copy the code

Poor compatibility, compatible with IE10 or higher

  1. flex
.parent{

 display: flex;

 justify-content: center;

 align-items: center;

}

Copy the code

Compatibility is poor

Multi-column layouts

One column is constant width and one column is adaptive

  1. float + margin
.left{

 float: left;

 width: 100px;

}

.right{

 margin-left: 120px;

}

Copy the code

This scheme is better for fixed-width layout, and the following method 2 is recommended for indeterminate width layout.

  1. float + overflow
.left{

 float: left;

 width: 100px;

 margin-right: 20px;

}

.right{

 overflow: hidden;

}

Copy the code

This scheme can be perfectly implemented regardless of multiple columns of fixed width or variable width, and can realize contour layout at the same time.

  1. table
.parent{

 display: table; width: 100%;

 table-layout: fixed;

}

.left,.right{

 display: table-cell;

}

.left{

 width: 100px;

 padding-right: 20px;

}

Copy the code
  1. flex
.parent{

 display: flex;

}

.left{

 width: 100px;

 padding-right: 20px;

}

.right{

 flex: 1;

}

Copy the code

Multiple columns of fixed width, one column adaptive

  1. float + overflow
.left,.center{

 float: left;

 width: 100px;

 margin-right: 20px;

}

.right{

 overflow: hidden;

}

Copy the code
  1. table
.parent{

 display: table; width: 100%;

 table-layout: fixed;

}

.left,.center,.right{

 display: table-cell;

}

.right{

 width: 100px;

 padding-right: 20px;

}

Copy the code
  1. flex
.parent{

 display: flex;

}

.left,.center{

 width: 100px;

 padding-right: 20px;

}

.right{

 flex: 1;

}

Copy the code

One column is of variable width and one column is adaptive

  1. float + overflow
.left{

 float: left;

 margin-right: 20px;

}

.right{

 overflow: hidden;

}

.left p{width: 200px; }

Copy the code
  1. table
.parent{

 display: table; width: 100%;

}

.left,.right{

 display: table-cell;

}

.left{

Width: 0.1%;

 padding-right: 20px;

}

.left p{width:200px; }

Copy the code
  1. flex
.parent{

 display: flex;

}

.left{

 margin-right: 20px;

}

.right{

 flex: 1;

}

.left p{width: 200px; }

Copy the code

Multiple columns of variable width, one column adaptive

  1. float + overflow
.left,.center{

 float: left;

 margin-right: 20px;

}

.right{

 overflow: hidden;

}

.left p,.center p{

 width: 100px;

}

Copy the code

uniform

  1. float + margin
.parent{

 margin-left: -20px;

}

.column{

 float: left;

 width: 25%;

 padding-left: 20px;

 box-sizing: border-box;

}

Copy the code
  1. table + margin
.parent-fix{

 margin-left: -20px;

}

.parent{

 display: table;

 width:100%;

 table-layout: fixed;

}

.column{

 display: table-cell;

 padding-left: 20px;

}

Copy the code
  1. flex
.parent{

 display: flex;

}

.column{

 flex: 1;

}

.column+.column{

 margin-left:20px;

}

Copy the code

contour

  1. float + overflow
.parent{

 overflow: hidden;

}

.left,.right{

 padding-bottom: 9999px;

 margin-bottom: -9999px;

}

.left{

 float: left; width: 100px;

}

.right{

 overflow: hidden;

}

Copy the code
  1. table
.parent{

 display: table;

 width: 100%;

}

.left{

 display:table-cell;

 width: 100px;

 margin-right: 20px;

}

.right{

 display:table-cell;

}

Copy the code
  1. flex
.parent{

 display:flex;

 width: 100%;

}

.left{

 width: 100px;

}

.right{

 flex:1;

}

Copy the code

Side by side, evenly aligned, single row to the left

flex

.main {

    display: flex;

    flex-flow: row wrap;

    justify-content: space-between;

}

.item {

    display: inline-block;

}

.empty{

    height: 0;

    visibility: hidden;

}

Copy the code

Holy Cup layout & Twin wings layout

The holy grail layout

<div class="container">

    <div class="header">header</div>

    <div class="wrapper clearfix">

        <div class="main col">main</div>

        <div class="left col">left</div>

        <div class="right col">right</div>

    </div>

    <div class="footer">footer</div>

</div>







.container {width: 500px; margin: 50px auto; }

.wrapper {padding: 0 100px 0 100px; }

.col {position: relative; float: left; }

.header,.footer {height: 50px; }

.main {width: 100%; height: 200px; }

.left {width: 100px; height: 200px; margin-left: -100%; left: -100px; }

.right {width: 100px; height: 200px; margin-left: -100px; right: -100px; }

.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; }

Copy the code

Twin wing layout

<div class="container">

    <div class="header">header</div>

    <div class="wrapper clearfix">

        <div class="main col">

            <div class="main-wrap">main</div>

        </div>

        <div class="left col">left</div>

        <div class="right col">right</div>

    </div>

    <div class="footer">footer</div>

</div>









.col {float: left; }

.header {height: 50px; }

.main {width: 100%; }

.main-wrap {margin: 0 100px 0 100px; height: 200px; }

.left {width: 100px; height: 200px; margin-left: -100%; }

.right {width: 100px; height: 200px; margin-left: -100px; }

.footer {height: 50px; }

.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; }

Copy the code

Locate the layout 

<div class="header">header</div>

<div class="wrapper">

    <div class="main col">

        main

    </div>

    <div class="left col">

        left

    </div>

    <div class="right col">

        right

    </div>

</div>

<div class="footer">footer</div>







.wrapper { position: relative; }

.main { margin:0 100px; }

.left { position: absolute; left: 0; top: 0; }

.right { position: absolute; right: 0; top: 0; }

Copy the code