如何獲得一個flex項目來清除所有的兄弟姐妹？

我想實現一個雙列flex，其中左列有許多div，右列有一個高div。我希望右列位於彈性框的頂部，與左列的第一個div內聯。如何獲得一個flex項目來清除所有的兄弟姐妹？

但無論我嘗試，右列div與左列的最後一列div排隊。

有點難以解釋，但這jsfiddle顯示我的意思。

https://jsfiddle.net/sjf4evx5/1/

我要藍色的div在頂部所有的紅色div的旁邊。

看起來這應該很容易，但很可惜......

來源

2017-05-06 Runny Yolk

在左欄中是否有一組div數量？或者容器是否有確定的高度？ –

我的回答中是否有某些內容缺失並且您接受？ – LGSon

CSS Flexbox，就不能清除兄弟作爲一個可以用浮漂做，因此，如果使用柔性行方向你需要用紅色的的，。。

* { 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    border: 1px solid black; 
 
} 
 

 
.wrapper { 
 
    flex-basis: 60%; 
 
} 
 

 
.sixty { 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 1px solid white; 
 
} 
 

 
.forty { 
 
    flex-basis: 40%; 
 
    background-color: blue; 
 
    height: 1000px; 
 
}

<div class="flex-container"> 
 
    <div class="wrapper"> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    </div> 
 
    <div class="forty"></div> 
 
</div>

..或改變彎曲方向柱，給容器的高度，高度不小於紅色的之和藍色的高度更大。

* { 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    border: 1px solid black; 
 
    height: 1000px; 
 
} 
 

 
.sixty { 
 
    height: 100px; 
 
    background-color: red; 
 
    border: 1px solid white; 
 
} 
 

 
.forty { 
 
    flex-basis: 1000px; 
 
    background-color: blue; 
 
}

<div class="flex-container"> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="sixty"></div> 
 
    <div class="forty"></div> 
 
</div>

來源

2017-05-06 09:00:04 LGSon

檢查該解決方案適用於您

Plunkr鏈接 - https://plnkr.co/edit/T17RW2LHJvw8FaxmwHyg?p=preview

CSS：

* { 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box; 
     } 

     .flex-container { 
     display: flex; 
     flex-direction: row; 
     flex-wrap: wrap; 
     border: 1px solid black; 
     } 

     .flex-cont{ 
     display : flex; 
     flex-direction : row; 
     } 

     .flex-div{ 
      width: 50%; 
     } 

     .sixty { 
     height: 100px; 
     width : 100%; 
     background-color: red; 
     border: 1px solid white; 
     } 

     .forty { 
     width : 100%; 
     background-color: blue; 
     height: 1000px; 
     }

HTML：

<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div class="flex-cont"> 
     <div class="flex-div"> 
     <div class="sixty"></div> 
     <div class="sixty"></div> 
     <div class="sixty"></div> 
     <div class="sixty"></div> 
     <div class="sixty"></div> 
     <div class="sixty"></div> 
     <div class="sixty"></div> 
    </div> 
    <div class="flex-div"> 
     <div class="forty"></div> 
    </div> 
    </div> 
</body> 
</html>

來源

2017-05-06 09:07:18

如何獲得一個flex項目來清除所有的兄弟姐妹？

回答

相關問題