1
フレックスアイテムにはスタックされた要素が含まれています。私は、最初のflex項目の中にラッパーdivを使用し、内部にコンテンツを追加することができることを知っていますdisplay: blockのプロパティ。フレックスボックス、フレックスアイテムの1つに2つの行を含めるにはどうすればいいですか？
ただし、Angularのng-repeatを使用していますが、フレックスコンテナの内側にあるすべてのアイテムが兄弟である必要があります。
これまでに持っていたものの簡単なデモです。http://jsbin.com/puhoma/edit?html,css,outputオレンジ色のボックスとアクアボックスを一緒に近づけたいです。
* {
box-sizing: border-box;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex > div {
background: red;
flex: 1 0 33%;
text-align: center;
padding: 10px;
max-width: 30%;
}
.flex > div:first-child {
background-color: orange;
flex: 0 0 100%;
height: 10%;
}
.flex > div:last-child {
background-color: aqua;
position: relative;
top: 1;
}<body>
<div class="flex">
<div>orange box and aqua box need to take up one row together</div>
<div>Hellothis is a long test sentence this is a long test sentence this is a long test sentence this is a long test is a long test sentence this is a long test sentence this is a long test sentence this is a long test</div>
<div>Hello 2this is a long test sentence this is a</div>
<div class="hi">Get me closer to Mr. Orange</div>
</div>
</body>
'身長削除：10％'オレンジボックスのか？ – kukkuz
'flexbox'は、グリッドの作成に使用するものではありません。もしあなたがそれを探しているのなら... – kukkuz
@kukkuz私はそれが彼が何を意味するのではないと思います。私は最後のブロックが空白を埋める必要があり、他の赤いブロックでさえ必要だと思います。 – adamk22