2
다양한 화면 크기에 응답하는 플렉스 박스를 사용하여 그리드를 만들고 싶습니다. 휴대 전화에서 세로 방향으로 그리드를 한 열에 만 표시하고자합니다. 가로 방향의 모바일에 대해서는 그리드가 두 개의 열로 바뀌고 그리드가 한 열에서와 동일한 순서를 유지하도록하고 싶습니다. 데스크톱의 경우 그리드가 각각 3 개의 열이있는 3 개의 행이되어야합니다.중첩 된 flexbox 그리드에서 플렉스 방향이 작동하지 않습니다.
지금까지 두 열 레이아웃에서 세 개의 플렉스 박스 세트마다 빈 공간이 생성되었습니다. 나는 그 공간을 채우기 위해 다음 flexbox를 원하고 누군가가 이것을 달성하는데 나를 도울 수 있기를 바랬다.
/* 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 –