如何在 flex 容器下放置网格包装器？

Question

我正在尝试制作所有布局的“示例页面”（因此一个在另一个之下）如何将网格包装器放置在 flex 容器下而不显示在同一行中？ 如果我删除display: flex它会自动进入但 flex 保持在同一行。

为什么它们都具有相同的鲑鱼背景颜色？

谢谢。

 .flex-wrapper { display: flex; border: 5px solid rgb(0, 0, 0); }.flex-wrapper>div { padding: 20px; margin: 5px; background-color: salmon; } /* grid */.grid-wrapper { display: grid; border: 5px solid purple; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; gap: 10px; }.grid-wrapper>div { padding: 20px; margin: 5px; border-radius: 5px; background-color: aquamarine; }.box1 { grid-column: 2 / 4; grid-row: 1; }.box2 { grid-column: 1; grid-row: 1 / 3; }.box3 { grid-row: 2; grid-column: 3; }

 <h1>Flexbox Layout</h1> <div class="flex-wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <!--Grid--> <div class="grid-wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> <div class="box6">Six</div> </div> </div>

Answer 1

只需将盒子包装在容器中，然后将 add a flex-direction to column属性放入flex-wrapper css class 选择器

 .flex-wrapper { display: flex; flex-direction: column; border: 5px solid rgb(0, 0, 0); }.flex-wrapper.box-container > div { padding: 20px; margin: 5px; background-color: salmon; } /* grid */.grid-wrapper { display: grid; border: 5px solid purple; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; gap: 10px; }.grid-wrapper>div { padding: 20px; margin: 5px; border-radius: 5px; background-color: aquamarine; }.box1 { grid-column: 2 / 4; grid-row: 1; }.box2 { grid-column: 1; grid-row: 1 / 3; }.box3 { grid-row: 2; grid-column: 3; }

 <h1>Flexbox Layout</h1> <div class="flex-wrapper"> <div class="box-container"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> <!--Grid--> <div class="grid-wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> <div class="box6">Six</div> </div> </div>

Answer 2

为什么它们都有相同的鲑鱼背景颜色？

因为.flex-wrapper > div适用于作为 flex-wrapper 的直接子级的每个 div。

如何在 flex 容器下放置网格包装器而不显示在同一行中？

您可以将flex-wrap规则添加到您的 flex-wrapper 并将网格项设置为足够宽以进行换行，如下例所示，但您可能会考虑您的外部容器是否应该是网格而不是 flex。 这样你就会有更多的控制权。

 .flex-wrapper { display: flex; border: 5px solid rgb(0, 0, 0); flex-wrap: wrap; /* <=== */ }.flex-wrapper>div { padding: 20px; margin: 5px; background-color: salmon; } /* grid */.grid-wrapper { display: grid; border: 5px solid purple; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; gap: 10px; flex: 1 1 100%; /* <=== */ }.grid-wrapper>div { padding: 20px; margin: 5px; border-radius: 5px; background-color: aquamarine; }.box1 { grid-column: 2 / 4; grid-row: 1; }.box2 { grid-column: 1; grid-row: 1 / 3; }.box3 { grid-row: 2; grid-column: 3; }

 <h1>Flexbox Layout</h1> <div class="flex-wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <!--Grid--> <div class="grid-wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> <div class="box6">Six</div> </div> </div>