flex常見佈局

基礎知識：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)

等分：flex:1

<div class="main">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
</div>
<!--css樣式 -->
.main {
    display: flex;
}
.item {
    flex: 1;
}

居中：兩個屬性justify-content: center; align-items: center;

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

.main {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}
.item {
    width: 100px;
    height: 100px;
}

左定寬右自適應：左元素定寬，右寬度100%

<div class="main">   
    <div class="item left">左邊</div>
    <div class="item right">1</div>
</div>

.main {
    display: flex;
    min-height: 100vh;
}
.item {
    height: 100%;
}
.left {
    width: 300px;
}
.right {
    width: 100%;
}

三欄佈局-左右定寬中間自適應:中間flex:1;左右寬度寫死

<div class="main">
    <div class="item left">左</div>
    <div class="item center">中</div>
    <div class="item right">右</div>
</div>

.main {
    display: flex;
    min-height: 100vh;
}
.item {
    height: 100%;
}
.left {
    width: 100px;
}
.center {
    flex: 1;
}
.right {
    width: 100px;
}

九宮格佈局：flex:1;

<div class="container">
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
    <div class="row">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</div>

.container {
    display: flex;
    min-height: 100vh;
}
.row {
    flex: 1;
    display: flex;
}
.left {
    flex: 1;
}
.middle {
    flex: 1;
}
.right {
    flex: 1;
}

階梯佈局：item本身屬性align-self子項本身的屬性，可以單獨設置對齊方式

<div class="main">
    <div class="item item1">1</div>
    <div class="item item2">1</div>
    <div class="item item3">1</div>
</div>

.main {
    display: flex;
    min-height: 100vh;
}
.item {
    border: 1px solid saddlebrown;
    box-sizing: border-box;
    flex: 1;
}
.item1 {
    align-self: flex-start;
}
.item2 {
    align-self: center;
}
.item3 {
    align-self: flex-end;
}

聖盃佈局：上下固定高度，中間左右固定高度。自適應爲flex:1;固定高度用flex-basic:100px;

<div class="container">
    <div class="header">Header</div>
    <div class="content">
        <div class="content-left">Left</div>
        <div class="content-middle">Center</div>
        <div class="content-right">Right</div>
    </div>
    <div class="footer">Footer</div>
</div>

.container{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
}
.header{
    flex: 0 0 100px;
    background-color: royalblue;
}
.content{
    display: flex;
    flex: 1;
}
.content-left{
    flex: 0 0 100px;
    background-color: saddlebrown;
}
.content-right{
    flex: 0 0 100px;
    background-color: darkgreen;
}
.content-middle{
    flex: 1;
    background-color:blanchedalmond;
}
.footer{
    flex: 0 0 100px;
    background-color: red;
}

原文地址：https://juejin.im/post/5e43b8d3e51d45270e2116d0