如何向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儿童，一个左侧和两个右侧

回答

相关问题