具有两个动态列和三个项目的CSS Flexbox布局

我想要做的是有两个列：一个主列在左边，一个在右边，其中有两个项目。问题是，所有三个物品的高度以及整个容器的高度差异很大，这阻碍了布局的包装。具有两个动态列和三个项目的CSS Flexbox布局

我不能把正确的项目放到一个div中，因为我需要将其中的一个移动到顶部（通过订单）。

基本上，我想实现下面的结果，而不必将容器设置为固定高度。

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    height: 800px; 
 
} 
 

 
.child--main { 
 
    height: 800px; 
 
    width: calc(200%/3); 
 
    color: #fff; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    background-color: #6b6bef; 
 
    line-height: 800px; 
 
    flex-basis: 100%; 
 
} 
 

 
.child--video { 
 
    height: 300px; 
 
    width: calc(100%/3); 
 
    background-color: #f1b36a; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    text-transform: uppercase; 
 
} 
 

 
.child--sidebar { 
 
    height: 400px; 
 
    width: calc(100%/3); 
 
    text-align: center; 
 
    line-height: 400px; 
 
    color: #fff; 
 
    background-color: #81ca3a; 
 
    text-transform: uppercase; 
 
}

<div class="flex"> 
 
    <div class="child child--main">main</div> 
 
    <div class="child child--video">video</div> 
 
    <div class="child child--sidebar">sidebar</div> 
 
</div>

来源

2017-04-26 DiiLord

如果你不能在容器中设置一个固定的高度，你不能嵌套两个小项的单独的容器，那么Flexbox，就不会在这种情况下工作。你需要另一种方法。请参阅[**此帖子**]（http://stackoverflow.com/q/34480760/3597276）。 –

你可以使用CSS网格布局吗？ –

这是对Flexbox的一种替代方法。

希望这对你有所帮助。

$(document).ready(function() { 
 
    setInterval(function(){ 
 
    if (parseInt($('.child--main').css('height'), 10) == 1000) { 
 
     $('.child--main').animate({'height': '100px'}, 1000); 
 
    } else { 
 
     $('.child--main').animate({'height': '1000px'}, 1000); 
 
    } 
 
    
 
    }, 2000); 
 
});

.flex { 
 
    /*display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    height: 800px;*/ 
 
} 
 

 
.child--main { 
 
    float:left; 
 
    height: 800px; 
 
    width: calc(200%/3); 
 
    color: #fff; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    background-color: #6b6bef; 
 
    line-height: 800px; 
 
    flex-basis: 100%; 
 
} 
 

 
.child--video { 
 
    float:right; 
 
    height: 300px; 
 
    width: calc(100%/3); 
 
    background-color: #f1b36a; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    text-transform: uppercase; 
 
} 
 

 
.child--sidebar { 
 
    float:right; 
 
    clear:right; /* this for a small height body */ 
 
    height: 400px; 
 
    width: calc(100%/3); 
 
    text-align: center; 
 
    line-height: 400px; 
 
    color: #fff; 
 
    background-color: #81ca3a; 
 
    text-transform: uppercase; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="flex"> 
 
    <div class="child child--main">main</div> 
 
    <div class="child child--video">video</div> 
 
    <div class="child child--sidebar">sidebar</div> 
 
</div>

来源

2017-04-26 18:51:47 Baro

具有两个动态列和三个项目的CSS Flexbox布局

回答

相关问题