2
さまざまな画面サイズに対応するフレックスボックスを使用してグリッドを作成したいと考えています。縦向きのモバイルでは、グリッドを1列のみにしたいと思います。ランドスケープのモバイルについては、グリッドを2つの列に変えて、グリッドを1つの列と同じ順序に維持したいと思います。デスクトップの場合、グリッドはそれぞれ3つの列で3行になります。ネストされたフレックスボックスグリッドでフレックス方向が機能しない
今のところ、2列のレイアウトでは、3つのフレックスボックスの各セットの後に作成される空きスペースがあります。私は次のフレックスボックスがそのスペースを埋めることを望み、誰かがこれを達成するのを手伝ってくれることを願っていました。ここで
は、私が（デスクトップ）を複製しています何のスクリーンキャプチャです：あなたのコードで
コード
/* CSS Styles for the revised "Our */
/* Extra small devices (phones, less than 768px) */
.work__container {
height: auto;
display: flex;
flex-direction: column;
}
.work__flex {
width: 100vw;
height: auto;
display: flex;
flex-direction: column;
}
.work__flex--item {
width: 100vw;
height: 100vw;
}
.amur {background-color: #F0E5D3;}
.pop-shoes {background-color: #F59390;}
.love-your-linens {background-color: #DADADA;}
.bench {background-color: #B3B3B3;}
.dogpack {background-color: #359DB6;}
.smoke-show {background-color: #426449;}
.roman-coffee-co {background-color: #9A7D2F;}
.protech {background-color: #E2342D;}
.northstone {background-color: #363636;}
/* Mobile in landscape orientation */
@media (max-width: 767px) and (orientation: landscape) {
.work__flex {
flex-direction: row;
flex-wrap: wrap;
}
.work__flex--item {
width: 50vw;
height: 50vw;
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.work__flex {
flex-direction: row;
flex-wrap: wrap;
}
.work__flex--item {
width: 50vw;
height: 50vw;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.work__flex {
flex-direction: row;
}
.work__flex--item {
width: 33.33vw;
height: 33.33vw;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}<div class="work__container">
<div class="work__flex">
<div class="work__flex--item one">
</div>
<div class="work__flex--item two">
</div>
<div class="work__flex--item three">
</div>
</div>
<div class="work__flex">
<div class="work__flex--item one">
</div>
<div class="work__flex--item two">
</div>
<div class="work__flex--item three">
</div>
</div>
<div class="work__flex">
<div class="work__flex--item one">
</div>
<div class="work__flex--item two">
</div>
<div class="work__flex--item three">
</div>
</div>
</div>
私による完全な監督。それを指摘してくれてありがとう。 @Michael_B –