主页 / 问题 / 572703
Accepted
HelpaMnePlz
Asked:2020-10-02 09:45:25 +0000 UTC2020-10-02 09:45:25 +0000 UTC

flexbox布局的实现

  • 772

侧边栏、导航栏和主栏有 3 个块。如何在没有额外包装的情况下实现图片中的内容？

.sidebar
.navbar
.main

在此处输入图像描述

来自评论的解释

我所说的包装器是指额外的类 ( .wrapper, .content)。如果没有额外的类，这是不可能实现的吗？

html

3 个回答

  1. 没有看到您的代码，您的意思并不完全清楚

    没有额外的包裹

    你可以尝试用 flexbox 来做。

    MDN CSS Flexible Box 布局
    MDN 使用 CSS Flexible Boxes

    .wrapper {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
aside {
  background: lightgreen;
  flex-basis: 20%;
  height: 100%;
}
.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
nav {
  background: orangered;
  width: 100%;
  height: 60px;
}
main {
  background: lightgrey;
  flex-grow: 1;
}
    <div class="wrapper">
  <aside>sidebar</aside>
  <div class="content">
    <nav>navbar</nav>
    <main>main</main>
  </div>
</div>

    • 2
  2. Best Answer

    我尝试body沿列使用和引导 flex 作为 flex 的容器。但是为了让块开始移动到新的列，有必要为此设置body确切的高度min-height（这还不够）。因此，布局停止垂直拉伸。

    body {
  display: flex;
  flex-flow: column wrap;
  height: 180px;
}
.sidebar {
  background: #69c;
  height: 100%; 
  width: 30%; 
}
.navbar {
  background: #c69;
  height: 60px; 
  width: 70%;
}
.main {
  background: #9c6;
  height: calc(100% - 60px); 
  width: 70%;
}
    <div class="sidebar">sidebar</div>
<div class="navbar">navbar</div>
<div class="main">main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main</div>

    如果你移除导航下方的侧边栏，那么 flex 将逐行移动，布局将垂直拉伸：

    body {
  display: flex;
  flex-flow: row wrap;
}
.sidebar {
  background: #69c;
  flex-basis: 30%; 
}
.navbar {
  background: #c69;
  flex-basis: 100%;
}
.main {
  background: #9c6;
  flex-basis: 70%; 
}
.sidebar,
.navbar,
.main {
  min-height: 60px; 
}
    <div class="navbar">navbar</div>
<div class="sidebar">sidebar</div>
<div class="main">main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main</div>

    • 2

  3. 通常的方式：

    .sidebar{
  background-color:#72DCC3;
  height:300px;
  width:100px;
  float:left;
}

.navbar{
  background-color:red;
  height:100px;
}

.main{
  background-color:gray;
  height:200px;
}
    <div class="sidebar">sidebar</div>
<div class="navbar">navbar</div>
<div class="main">main</div>

    • 1

相关问题