設計有3列使用Flex

Question

佈局我要設計一個3列的佈局，這些條件：

• 我不想使用百分比
• 如果左或右列我不在乎與像素由
• 中心柱已採取的剩餘寬度
• 元件必須垂直地對準
• 我需要的跨度爲它們的母體的100％的高度，以使懸停工作採用了全背景 - 顏色

我試過在主容器上使用display:flex，它工作的很好，但我無法垂直對齊元素。我嘗試使用display-table: cell和vertical-align: middle，但它似乎不適用於flex。

我開發了一個的jsfiddle給你看我的嘗試：http://jsfiddle.net/v13yy2v3/4/

html, body { 
 
    height:100%; 
 
} 
 
#mainPercent { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 20%; 
 
    color: white; 
 
} 
 
#leftPercent { 
 
    background-color: green; 
 
    float: left; 
 
    width: 5%; 
 
    height:100%; 
 
} 
 
#centerPercent { 
 
    background-color: blue; 
 
    text-align: center; 
 
    float: left; 
 
    width: 90%; 
 
    /* percent isn't wanted */ 
 
    height:100%; 
 
    display:table; 
 
} 
 
#centerPercent span { 
 
    display:table-cell; 
 
    vertical-align : middle; 
 
} 
 
#rightPercent { 
 
    background-color: purple; 
 
    float: right; 
 
    height:100%; 
 
    width: 5%; 
 
} 
 
#mainFlex { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 20%; 
 
    color: white; 
 
    display:flex; 
 
    /* align-items: center; 
 
    justify-content: center; items are not 100% height */ 
 
} 
 
#leftFlex { 
 
    background-color: green; 
 
} 
 
#centerFlex { 
 
    background-color: blue; 
 
    text-align: center; 
 
    flex:1; 
 
    /*display:table;*/ 
 
} 
 
#rightFlex { 
 
    background-color: purple; 
 
} 
 
#mainPx { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 20%; 
 
    color: white; 
 
} 
 
#leftPx { 
 
    width:128px; 
 
    float:left; 
 
    background-color: green; 
 
} 
 
#centerPx { 
 
    background-color: blue; 
 
    text-align: center; 
 
    width:100%; 
 
} 
 
#rightPx { 
 
    float:right; 
 
    width : 128px; 
 
    background-color: purple; 
 
}

<br/> 
 
<div id="mainPercent"> 
 
    <div id="leftPercent"><span>left</span> 
 
    </div> 
 
    <div id="centerPercent"><span>center</span> 
 
    </div> 
 
    <div id="rightPercent"><span>right</span> 
 
    </div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<div id="mainFlex"> 
 
    <div id="leftFlex"><span>left</span> 
 
    </div> 
 
    <div id="centerFlex"><span>center</span> 
 
    </div> 
 
    <div id="rightFlex"><span>right</span> 
 
    </div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<div id="mainPx"> 
 
    <div id="leftPx"><span>left</span> 
 
    </div> 
 
    <div id="centerPx"><span>center</span> 
 
    </div> 
 
    <div id="rightPx"><span>right</span> 
 
    </div> 
 
</div>

Answer 1

你不得不保持Flexbox將延伸到子項和跨度。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
#mainFlex { 
 
    background-color: red; 
 
    width: 100%; 
 
    height: 20%; 
 
    color: white; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.left { 
 
    background-color: green; 
 
} 
 
.center { 
 
    background-color: blue; 
 
    text-align: center; 
 
    flex: 1; 
 
} 
 
.right { 
 
    background-color: purple; 
 
} 
 
.child { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
span { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-content: center; 
 
    padding: 0.25em; 
 
    flex: 1; 
 
} 
 
span:hover { 
 
    background: #bada55; 
 
}

<div id="mainFlex"> 
 
    <div class=" left child"><span>left</span> 
 

 
    </div> 
 
    <div class="center child"><span>center</span> 
 

 
    </div> 
 
    <div class="right child"><span>right</span> 
 

 
    </div> 
 
</div>