3欄的Flex佈局 - 中間一欄只寬度，因爲它的內容

我的小提琴至今：3欄的Flex佈局 - 中間一欄只寬度，因爲它的內容

.fill-height-or-more { 
 
    min-height: 100%; 
 
    display: flex; 
 
} 
 
.fill-height-or-more > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -moz-box-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items : center; 
 
} 
 

 
.some-area > div { 
 
    padding: 1rem; 
 
} 
 
.some-area > div:nth-child(1) { 
 
    background: #88cc66; 
 
} 
 
.some-area > div:nth-child(2) { 
 
    background: #79b5d2; 
 
} 
 
.some-area > div:nth-child(3) { 
 
    background: #8cbfd9; 
 
} 
 
.some-area > div h1, .some-area > div h2 { 
 
    margin: 0 0 0.2rem 0; 
 
} 
 
.some-area > div p { 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
}

<section class="some-area fill-height-or-more"> 
 
    <div> 
 
     <h1>LEFT</h1> 
 

 
    </div> 
 
    <div> 
 
     <h2>Two</h2> 
 
     <p>This Column should</p> 
 
     <p>only be as width as</p> 
 
     <p>its content.</p> 
 
    </div> 
 
    <div> 
 
     <h2>RIGHT</h2> 
 
    </div> 
 
</section>

這個職位是一個續集我previous post。

任務1：我希望中間列的寬度與其內容一樣寬。然後左邊和右邊的列應該平等地填充其餘的空間，以便中間的列始終停留在中間。

在此先感謝您的小時幫助！

Muff

來源

2016-04-27 Raggamuffin

您可以再補充flex: 1到left和right的div或在您的情況DEMO

.content { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 
.content > div { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.left, 
 
.right { 
 
    flex: 1; 
 
    background: lightblue; 
 
} 
 
.middle { 
 
    background: lightgreen; 
 
}

<div class="content"> 
 
    <div class="left">Lorem</div> 
 
    <div class="middle">Lorem ipsum dolor sit amet.</div> 
 
    <div class="right">lorem</div> 
 
</div>

來源

2016-04-27 12:35:32

此版本的中間內容/文本重疊。中間欄應該始終與內容一樣寬，左右欄應該同化。 – Raggamuffin

你認爲文本重疊是什麼意思？中間欄中的文本應該保持在一行嗎？ –

是的文本應該保留在一行，但列寬不適應。 – Raggamuffin

你的意思是說像this？你應該這樣做：

.some-area > div:nth-child(2) { 
    background: #79b5d2; 
    align-self: center; 
}

如果你想改變width你應該做的：

.some-area > div:nth-child(2) { 
     background: #79b5d2; 
     flex: 0; 
    }

來源

2016-04-27 12:35:18 Ciprianis

就像你的第二個例子，但沒有打破文本。我嘗試使用顯示：塊的文字，但我無論如何包裝。 – Raggamuffin

然後您應該添加如下內容：'flex：0 0 auto;'它應該保持文本正常。 – Ciprianis

你可以這樣做，例如，以便與3周div的的大小玩法：

.some-area > div:nth-child(1) { 
background: #88cc66; 
flex: .4; 
} 

.some-area > div:nth-child(2) { 
background: #79b5d2; 
flex: .2; 
align-self: center; 

} 
.some-area > div:nth-child(3) { 
background: #8cbfd9; 
flex: .4; 
}

左右DIV將兩倍大，我不知道但如果這是你是什麼試圖完成。

來源

2016-04-27 12:41:13

這將是一個很好的後備方法與媒體查詢相結合。 – Raggamuffin

是的，這是一個解決方案，但可能不是最好的。你有沒有取得任何進展？ –

通過向其CSS添加（例如）flex: 0 0 150px;，您可以分配一個固定的寬度並且不收縮或增長到該元素。

.fill-height-or-more { 
 
    min-height: 100%; 
 
    display: flex; 
 
} 
 
.fill-height-or-more > div { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -moz-box-flex: 1; 
 
    -ms-flex: 1; 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items : center; 
 
} 
 

 
.some-area > div { 
 
    padding: 1rem; 
 
} 
 
.some-area > div:nth-child(1) { 
 
    background: #88cc66; 
 
} 
 
.some-area > div:nth-child(2) { 
 
    background: #79b5d2; 
 
    flex: 0 0 150px; 
 

 
} 
 
.some-area > div:nth-child(3) { 
 
    background: #8cbfd9; 
 
} 
 
.some-area > div h1, .some-area > div h2 { 
 
    margin: 0 0 0.2rem 0; 
 
} 
 
.some-area > div p { 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
}

<section class="some-area fill-height-or-more"> 
 
    <div> 
 
     <h1>LEFT</h1> 
 

 
    </div> 
 
    <div> 
 
     <h2>Two</h2> 
 
     <p>This Column should</p> 
 
     <p>only be as width as</p> 
 
     <p>its content.</p> 
 
    </div> 
 
    <div> 
 
     <h2>RIGHT</h2> 
 
    </div> 
 
</section>

來源

2016-04-27 12:46:42 Johannes

3欄的Flex佈局 - 中間一欄只寬度，因爲它的內容

回答

相關問題