如何向Flexbox 3兒童，一個左側和兩個右側

有什麼辦法可以在三個孩子的Flexbox中完成以下示例？如何向Flexbox 3兒童，一個左側和兩個右側

我目前使用下面的代碼：

# Slim 
.container 
    .children 
    .children 
    .children 

# SASS 
.container 
    display: flex 
    flex-wrap: wrap 
    align-items: center 

    .children 
    flex-basis: 50%

有沒有辦法做得到期望的結果？

來源

2017-04-13 Martin

表明您已經試過什麼 – Sankar

@SankarRaj請參閱更新的問題。 – Martin

爲什麼downvote？ – Martin

如果您想要使用該HTML結構，您可以使用Flexbox做到這一點，如果您在父元素上設置固定高度並使用flex-direction: column與flex-wrap: wrap。所以如果你把第一個元素的100％的高度另外兩個元素打破到右側。

* { 
 
    box-sizing: border-box; 
 
} 
 
body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 
.children { 
 
    width: calc(50% - 10px); 
 
    margin: 5px; 
 
    background: #D8D8D8; 
 
    flex: 1; 
 
} 
 
.children:first-child { 
 
    flex: 0 0 calc(100% - 10px); 
 
    border: 2px solid #44C0FF; 
 
}

<div class="container"> 
 
    <div class="children"></div> 
 
    <div class="children"></div> 
 
    <div class="children"></div> 
 
</div>

來源

2017-04-13 12:44:06

你得到這個，然後https://jsfiddle.net/Lg0wyt9u/1790/ –

好吧，我現在看到滾動條，我的不好 – dippas

沒問題，謝謝你的建議。這些計算是爲了利潤。 –

如果你可以換其他2 .children divs內側another .container則是你可以嘗試如下，

#box{ 
 
    display:flex; 
 
    width:100%; 
 
    height:400px; 
 
    background:#ccc; 
 
    text-align:center; 
 
} 
 
#box > .b1{ 
 
    flex:1 1 0; 
 
    background:#f22; 
 
    margin-right:10px; 
 
} 
 
#box > .box1{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex:1 1 0; 
 
} 
 
#box > .box1 > .b2{ 
 
    flex:1 1 0; 
 
    background:#f2f; 
 
    margin-bottom:10px; 
 
} 
 
#box > .box1 > .b3{ 
 
    flex:1 1 0; 
 
    background:#ff2; 
 
}

<div id="box"> 
 
    <div class="b1">1</div> 
 
    <div class="box1"> 
 
    <div class="b2">2</div> 
 
    <div class="b3">3</div> 
 
    </div> 
 
</div>

來源

2017-04-13 12:25:58 frnt

使用的columns代替flex將使它更適合你容易。

摘要示例：

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
.container { 
 
    width: 30vw; margin: 16px; 
 
    column-count: 2; column-gap: 0; 
 
} 
 
.container > div { 
 
    background-color: #44a; border: 2px solid transparent; 
 
    width: 15vw; height: 15vw; 
 
    background-clip: padding-box; 
 
} 
 
.container > div:first-child { width: 15vw; height: 30vw; }

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

注1：使用相對尺寸將保持它的響應也是如此。

注2：您可以使用透明邊框並更改大小以增加/減少間隙。

來源

2017-04-13 12:37:36 Abhitalks

如何向Flexbox 3兒童，一個左側和兩個右側

回答

相關問題