具有兩個動態列和三個項目的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佈局

回答

相關問題