文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox，嵌套网格/子网格

问Flexbox，嵌套网格/子网格
EN

Stack Overflow用户

提问于 2020-09-14 04:22:57

回答 1查看 106关注 0票数 2

期望输出

我正在尝试实现一个嵌套的Flexbox布局。

我希望第二列和第三列中的子元素在父元素上具有完整的大小。

当第一列的depth =1时，它可以工作，但当我添加Flex容器时，它会失败。

我对这个错误的思考

我被迫组合flex: 1和display: flex，以便使用相同的类，而不管它是用作容器还是项。

有什么想法吗？

实际代码

.grid-stretch {
  display: flex;
  align-items: stretch;
  background-color: yellow; /* to track errors */
}

.child-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: green; /* to track errors */
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow-wrap: break-work;
}

.root {
  max-width: 1200px;
  height: 100%;
}

header {
  min-height: 80px;
  /* set a solid border inside the header and not on its edge */
  box-sizing: border-box;
  border-bottom: 3px solid black;
}

/* depth 1 */
header nav:nth-child(1) {
  flex: 3;
  background-color: blue;
}

header nav:nth-child(2) {
  flex: 5;
  background-color: white;
}

header nav:nth-child(3) {
  flex: 2;
  background-color: red;
}

/* depth 2 */
header nav:nth-child(2) div {
  background-color: orange;
}

header nav:nth-child(3) div div {
  background-color: orange;
}

<!DOCTYPE html>
<html>

<body>
  <div class='root'>
    <header class='grid-stretch'>

      <nav class='child-centered'>
        <a>link</a>
      </nav>

      <nav class='child-centered'>
        <div class='grid-stretch'>
          <div class='child-centered'>
            <a>link</a>
            <a>link</a>
            <a>link</a>
          </div>
        </div>
      </nav>

      <nav class='child-centered'>
        <div class='grid-stretch'>
          <div class='child-centered'>
            <a>link</a>
            <a>link</a>
            <a>link</a>
          </div>
        </div>
      </nav>
    </header>

  </div>
</body>

</html>

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-14 05:54:25

如下所示更新您的代码：

.grid-stretch {
  display: flex;
  align-items: stretch;
  background-color: yellow; /* to track errors */
}

.child-centered  {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  background-color: green; /* to track errors */
}
/* added */
.flex {
  display: flex;
}
.flex  *{
  flex-grow:1;
}
/**/
html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow-wrap: break-work;
}

.root {
  max-width: 1200px;
  height: 100%;
}

header {
  min-height: 80px;
  /* set a solid border inside the header and not on its edge */
  box-sizing: border-box;
  border-bottom: 3px solid black;
}

/* depth 1 */
header nav:nth-child(1) {
  flex: 3;
  background-color: blue;
}

header nav:nth-child(2) {
  flex: 5;
  background-color: white;
}

header nav:nth-child(3) {
  flex: 2;
  background-color: red;
}

/* depth 2 */
header nav:nth-child(2) div {
  background-color: orange;
}

header nav:nth-child(3) div div {
  background-color: orange;
}

<!DOCTYPE html>
<html>

<body>
  <div class='root'>
    <header class='grid-stretch'>

      <nav class="flex">
        <a class="child-centered">link</a>
      </nav>

      <nav class="flex">
        <div class='grid-stretch'>
          <div class='child-centered'>
            <a>link</a>
            <a>link</a>
            <a>link</a>
          </div>
        </div>
      </nav>

      <nav class="flex">
        <div class='grid-stretch'>
          <div class='child-centered'>
            <a>link</a>
            <a>link</a>
            <a>link</a>
          </div>
        </div>
      </nav>
    </header>

  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63875212

复制

相似问题

问Flexbox，嵌套网格/子网格
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox，嵌套网格/子网格EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox，嵌套网格/子网格
EN