【css】佈局

flex佈局方案
position margin佈局方案
grid佈局方案

1. flex佈局方案

（1）塊級元素水平居中和垂直居中

body {
    display: flex;
    align-items: center; /*定義body的元素垂直居中*/
    justify-content: center; /*定義body的裡的元素水平居中*/
}
.content {
    width: 300px;
    height: 300px;
    background: orange;        
}

（2）三欄佈局

.container{display:flex;}
.left{order:-1;flex-basic:200px;/*row主軸時，flex專案的寬度*/}
.right{flex-basic:300px;}
.main{flex-grow:1;}/*相對比例大小。*/

2. position margin佈局方案

（1）塊級元素水平居中和垂直居中

content{
    margin-top:-50% of height;<--虛擬碼-->
    position:relative;
    top:50%;<--或者使用transform:translateY(50%);-->
}

（2）三欄佈局

.container{position:relative;}
.left{position:absolute;left:0;}
.right{position:absolute;right:0;}
.main{margin:}/*設定作用margin長度，適應left和right的模組。*/

###3. grid佈局方案