如何在Flexbox中並排設置兩個div的相等寬度？

參考CSS side by side div's auto equal widths，我正在尋求解決同樣的問題，只有我使用flexbox並且不希望爲我顯示的內容使用表格樣式。如何在Flexbox中並排設置兩個div的相等寬度？

#outer { 
 
    width: 1024px; 
 
    height: 768px; 
 
    
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div id="outer"> 
 
    <div class="inner">Inner HTML content has larger natural width</div> 
 
    
 
    <div class="inner">Inner HTML content has smaller natural width</div> 
 
</div>

所以兩列的寬度將與他們的內容伸展但左欄將具有更大的寬度的結果。爲了保持兩列對稱於中心，我需要右欄，它的寬度比左欄的寬度要短，等於左欄。我如何在Flexbox佈局中做到這一點？

編輯：我看到許多問題的答案基本上分配一個固定的寬度，以既容器（〜50％）。這不是我要找的。左側的容器可以隨意伸展至內容所需的任何寬度，並受到最大限度的限制，而且不應觸及。正確的容器需要擴展其寬度以匹配左側。

這樣做可以不訴諸JavaScript？

來源

2017-06-09 thegreatjedi

@Pete這裏是一個沒有，雖然一個並不需要爲這個Flexbox的：https://jsfiddle.net/rdh61g7c/8/ – LGSon

@LGSon確定我認錯但我認爲這將是更多的OP是想要的 - 他們需要它在1024框中心：https://jsfiddle.net/rdh61g7c/10 – Pete

爲了解決這個問題，需要將右邊的設置爲絕對值，並使內聯顯示outer。

爲內聯，由它的內容，這是離開，其中，作爲柔性的項目，也被其內容的大小，以及右不會影響，因爲它是定位在outer意志大小絕對的並且被排除在正常流程之外。

然後，只需按權到左末，它會使你確切想要的。

Fiddle demo

棧片斷

#outer { 
 
    position: relative; 
 
    height: 300px; 
 
    
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.inner { 
 
    border: 1px solid red; 
 
} 
 
.inner:nth-child(2) { 
 
    position: absolute; 
 
    left: 100%; 
 
    width: 100%; 
 
} 
 

 
/* this is for styling purpose only, and produce a blue border */ 
 
#outer::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; 
 
    width: 200%; 
 
    border: 1px solid blue; 
 
}

<div id="outer"> 
 
    <div class="inner"> 
 
    Inner HTML content has larger natural width than the other 
 
</div> 
 
    
 
    <div class="inner"> 
 
    This has a smaller natural width 
 
    </div> 
 
</div>

如果您還打算始終在視口中中間的2列的中心，你可以這樣做這（如果這是你想要的，讓我知道，我會解釋它是什麼）

Fiddle demo 2

來源

2017-06-09 10:26:37 LGSon

嗨，請參閱我的更新問題。我不打算充分填充外部容器。左邊的容器寬度可以是任何它選擇的，但是正確的容器必須匹配它。 – thegreatjedi

@thegreatjedi我更新了我的答案。這個是那個https://jsfiddle.net/rdh61g7c/15/ ...我的第二個小提琴樣本在我的回答中也是這樣，但我也讓那個絕對中心的右/左項目。 – LGSon

應用柔性設置到.inner元素：

.inner { 
    flex: 1 1 auto; 
}

這是該柔性成長，彈性收縮和Flex-基礎設置的簡寫。

這將確保#outer元素的剩餘空間平均分配給所有子元素，無論有多少元素。

請參閱以下文章以獲得完整的故障。

CSS Tricks - A Complete Guide to Flexbox

來源

2017-06-09 10:27:17

嗨，請看我對這個問題的更新。我不打算充分填充外部容器。左邊的容器寬度可以是任何它選擇的，但是正確的容器必須匹配它。 – thegreatjedi

雖然可以使用：

.inner { 
    flex: 1 0 50%; 
    border: 1px solid red; 
}

最簡單的解決辦法是：

.inner { 
    width: 50%; 
    }

這使的#outer div的50％內<div>的寬度。和50 + 50是100％。

來源

2017-06-09 11:14:50 Deathstorm

嗨，請看我對這個問題的更新。我不打算充分填充外部容器。左邊的容器寬度可以是任何它選擇的，但是正確的容器必須匹配它。 – thegreatjedi

我會建議在這種情況下不要使用flex，但是使內部的DIVs inline-blocks widht width: 50%。注意：在這種情況下，HTML代碼中的DIV之間不存在換行符是非常重要的 - 請參閱下面的示例。

#outer { 
 
    width: 1024px; 
 
    height: 768px; 
 
} 
 

 
.inner { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    width: 50%; 
 
    border: 1px solid #eee; 
 
}

<div id="outer"> 
 
    <div class="inner">Inner HTML content has larger natural width</div><div 
 
    class="inner">Inner HTML content has smaller natural width</div> 
 
</div>

來源

2017-06-09 16:28:07 Johannes

如何在Flexbox中並排設置兩個div的相等寬度？

回答

相關問題