Flex - 使父寬度的孩子？

我有一個彈性盒佈局。我想.outer-2的寬度是它的孩子的寬度，其中.outer-1和outer-3佔據了其餘的空間。Flex - 使父寬度的孩子？

我該如何做到這一點？

.container { 
 
    display: flex; 
 
} 
 

 
.outer-1 { 
 
    background: red; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 

 
.outer-2 { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
.outer-3 { 
 
    background: blue; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 

 
.inner { 
 
    flex-basis: 30px; 
 
    background: green; 
 
    height: 100px; 
 
    margin: 0 3px; 
 
}

<div class="container"> 
 
    <div class="outer-1"> 
 
    </div> 
 
    <div class="outer-2"> 
 
    <div class="inner"> 
 
    </div> 
 
    <div class="inner"> 
 
    </div> 
 
    <div class="inner"> 
 
    </div> 
 
    </div> 
 
    <div class="outer-3"> 
 
    </div> 
 
</div>

來源

2017-03-17 panthro

是不是你想要什麼？ [小提琴]（https://jsfiddle.net/Muhammad_Usman/v8tgyvbd/1/） –

穆罕默德·烏斯曼 - 差不多，儘管在你的例子中flex的基礎沒有任何作用。 – panthro

是否使用CSS網格選項？這種佈局可能會更容易。 –

您需要更改彎曲特性爲container防止其成長，以適應它的父的第二個孩子。那麼，爲每個.inner元素添加一個寬度或最小寬度將防止其父母將它們摺疊。

.container{ 
 
    display: flex; 
 
} 
 
.outer-1{ 
 
    background: red; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 
.outer-2{ 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.outer-3{ 
 
    background: blue; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 
.inner{ 
 
    width: 30px; 
 
    flex: 1 0 30px; 
 
    background: green; 
 
    height: 100px; 
 
    margin: 0 3px; 
 
}

<div class="container"> 
 
    <div class="outer-1"> 
 
    
 
    </div> 
 
    <div class="outer-2"> 
 
     <div class="inner"> 
 
    
 
     </div> 
 
     <div class="inner"> 
 
    
 
     </div> 
 
     <div class="inner"> 
 
    
 
     </div> 
 
    </div> 
 
    <div class="outer-3"> 
 
    
 
    </div> 
 
</div>

來源

2017-03-17 13:24:52 chazsolo

謝謝，但不使用Flex，您的設置最小寬度。 – panthro

你能解釋一下你期望'.inner'元素做什麼嗎？ – chazsolo

我想使用柔性基礎將內部元素的寬度設置爲30px。外2的寬度應該等於它的孩子的寬度。 – panthro

Flex - 使父寬度的孩子？

回答

相關問題