Question

我正在处理HTML / CSS页面的布局。我希望有一个侧边栏+主要内容，并在其上方有一个导航栏。

在这张照片上，布局似乎“不错”，但是我想将所有内容都拉伸到页面的整个尺寸。不必为此导航栏烦恼，因为我的主要内容是过度扩展（〜56px）

我写了以下代码...

html,
body {
  margin: 0 auto;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper>* {
  flex: 1 100%;
}

.main {}

.sidebar {}

@media all and (min-width: 600px) {
  .sidebar {
    flex: 1 0 0;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .sidebar {
    order: 1;
  }
  .main {
    order: 2;
  }
}

<body>
  <div class="wrapper">
    <header class="header">
      <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">Navbar</span>
      </nav>
    </header>
    <article class="main">
      <app-root></app-root>
    </article>
    <aside class="sidebar">Aside 1</aside>
  </div>
</body>

Answer 1

从我对这个问题的评论开始，问题是因为您正在为此布局使用包装Flexbox ；您应该将aside和article包装到另一个flexbox中以使其工作。查看以下演示（省略了用于移动视图的媒体查询）：

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0 auto;
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column; /* column flexbox */
  border: 1px solid red;
  height: 100%;
}

section,
aside,
header {
  border: 1px solid;
}

.wrapper section {
  display: flex; /* wraps article and aside into a flexbox */
  flex: 1; /* fill remaining space */
}

article {
  flex: 1; /* fill remaining space */
}

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="wrapper">
  <header class="header">
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
  </header>
  <section>
    <aside class="sidebar">Aside 1</aside>
    <article class="main">
      Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum
      some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here Lorel ipsum some text here
    </article>
  </section>
</div>

Answer 2

Flex主要用作单向布局。尽管可以按原样使用它，但最好还是将它集中在一行上。只需将.header移到.wrapper之外：

<body>
  <header class="header">
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
  </header>
  <div class="wrapper">
    <aside class="sidebar">Aside 1</aside>
    <article class="main">
      <app-root></app-root>
    </article>
  </div>
</body>

现在只需为侧边栏设置一个“默认”大小，为您的文章设置一个“流体”大小：

.wrapper {
    display: flex;
}

.sidebar {
    flex: 0 0 300px; /* will not grow, will not shrink, will have starting width of 300px */
}

.main {
    flex: 1 1 0; /* will grow, will shrink, will have starting width of 0 - aka it will fill all space available (page width minus 300px) */
}

然后，您可以使用媒体查询在不同的屏幕尺寸下更改.sidebar的默认大小，而.main将适应所有可用空间。

Flex列不会拉伸而不会过度扩展我的内容

2 个答案: