私は2列のフレックスを達成しようとしています。左側の列にはdivが多く、右側の列には1つの背の高いdivがあります。右の列をフレックスボックスの一番上に置いて、左の列の最初のdivとインラインにしたいと思います。フレックスアイテムを取得して兄弟のすべてをクリアするにはどうすればよいですか？
でも、私が試してみても、右の列divは、左の列の最後の列divの最後に並んでいます。
少し説明するのは難しいですが、このjsfiddleは私の言いたいことを示しています。
https://jsfiddle.net/sjf4evx5/1/
私は青のdivが次のすべての赤のdivに一番上になりたいです。
あなたは赤1のをラップする必要がフレックス行方向を使用するので、もし1は、浮動小数点数で実行できるよう明確同胞ことはできません、それは簡単なはずのように思えるが、残念ながら...
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;
}
.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>チェックは、このソリューションは、のために働く場合
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>
左側の列には設定された数のdivがありますか？または、コンテナの高さが定義されていますか？ –
私の答えに足りないものがありますか？ – LGSon