Question

所以我正在创建一个有

的布局

<div id="structure-content">
<main>content goes here</main>
<aside>aside content</aside>
</div>

我希望预留的宽度为宽度的四分之一，并在达到一定大小时自动缠绕到主体下方，并使主体占据整个宽度。我知道我可以使用媒体查询来做到这一点，但人们都说可以使用网格来完成，而无需媒体查询。我已经进行了数小时的实验和研究，无法解决。有任何想法吗？如果无法完成，那很好，我可以在flexbox或媒体查询中尝试一下。

提前准备。

Answer 1

以下div达到一定大小的代码将自动下降。如果要降低div的特定大小，我们只需要使用媒体查询即可。

#structure-content {
    margin-bottom: 1em;
    background: #fff;
    color: #fff;
    padding: 1.5em 1em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

main {
    background: green;
}

aside {
    background: blue;
}

main,
aside {
    flex: 1 0 15em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

<div id="structure-content">
    <main>content goes here</main>
    <aside>aside content</aside>
</div>

Answer 2

使用CSS Grid，您可以使main和aside占据可用宽度的一半和自动换行网格项目使用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))达到了最小宽度-请参见下面的演示

body {
  margin: 0;
}
#structure-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
main {
  background: aliceblue;
}
aside {
  background: cadetblue;
}

<div id="structure-content">
  <main>content goes here</main>
  <aside>aside content</aside>
</div>

解决方案

使用CSS Grid，我想说您可以使用媒体查询。无论如何， flexbox 都可以在这里很好地工作：

使用包装 flexbox
为min-width和aside中的每一个保留一个main并添加flex: 1以将其弯曲到剩余空间（如果可用）-演示下方：

body {
  margin: 0;
}
#structure-content {
  display: flex;
  flex-wrap: wrap; /* a wrapping flexbox */
}
main {
  background: aliceblue;
  min-width: 75vw; /* forces aside to take one-fourth space */
  flex: 1;
}
aside {
  background: cadetblue;
  min-width: 250px; /* minimum width of aside */
  flex: 1;
}

<div id="structure-content">
  <main>content goes here</main>
  <aside>aside content</aside>
</div>

CSS Grid达到特定大小时会自动换行

2 个答案: