我如何在flex中實現下面的佈局 - css

我們有一個包含5個box的flex容器，我被要求像下圖一樣顯示它們。我如何在flex中實現下面的佈局 - css

我能夠通過將另一兩個容器父容器內，以實現類似的佈局。如下所示。

如討論和回答 Here。然而，考慮到項目是存在的，據說這引入了很多複雜性，當我們採用時，會強制改變我們的js類的結構。我現在的任務是將它們放在一個容器中。

.layout-5-3 { 
    flex-direction: row; 
    display: flex; 
} 

.layout-5-3 > div:nth-child(1) { 
    flex-basis: 48%; 
} 

.layout-5-3 > div:nth-child(2), 
.layout-5-3 > div:nth-child(3), 
.layout-5-3 > div:nth-child(4), 
.layout-5-3 > div:nth-child(5) { 
    flex-basis: 48%; 
    flex-direction: column; 
}

，並在我的HTML

<div class="layout-5-3"> 
    <div class="box">Box1</div> 
    <div class="box">Box2</div> 
    <div class="box">Box3</div> 
    <div class="box">Box4</div> 
    <div class="box">Box5</div> 
</div>

我期待我的第一個孩子的放在左邊，其餘四佔據另一半的空間。考慮我以上的基礎。請問有什麼辦法可以實現這一點，而不需要在父容器內部引入另一個柔性容器？任何幫助，將不勝感激。

來源

2016-04-28 Nuru Salihu

這是可能的，但需要父母的固定高度和孩子定義的寬度......並且它仍然會以各種方式在各種瀏覽器中出現問題。

Codepen Demo

.layout-5-3 { 
 
    display: flex; 
 
    background: lightblue; 
 
    height: 250px; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    flex-wrap: wrap 
 
} 
 
.layout-5-3 > div { 
 
    border: 1px solid black; 
 
} 
 
.layout-5-3 > div:nth-child(1) { 
 
    width: 48%; 
 
    flex: 0 0 100%; 
 
    background: lightgreen; 
 
} 
 
.layout-5-3 > div:nth-child(2), 
 
.layout-5-3 > div:nth-child(3), 
 
.layout-5-3 > div:nth-child(4), 
 
.layout-5-3 > div:nth-child(5) { 
 
    width: 48%; 
 
    flex: 1; 
 
    background: pink; 
 
}

<div class="layout-5-3"> 
 
    <div class="box">Box1</div> 
 
    <div class="box">Box2</div> 
 
    <div class="box">Box3</div> 
 
    <div class="box">Box4</div> 
 
    <div class="box">Box5</div> 
 
</div>

來源

2016-04-28 16:04:51

我如何在flex中實現下面的佈局 - css

回答

相關問題