Question

我正在编写一个小的webapp，我正在使用kint进行调试。它很有效。

我也在使用flexbox进行布局。它太棒了。

问题是，如果我在输出任何HTML之前使用kint，它最终会在html / body标签的“Above”之上。

然后浏览器将放在 body标签内，这会影响我的flexbox属性。

结果，它不会显示在页面的顶部，而是显示在右侧，并且会收听我的主要内容。

我希望调试div的行为就好像它们里面 <main>

我的flexbox知识相当有限（Floats ftw？）所以我在这里：）

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-flow: row-reverse;
}

nav {
    width: 150px;
    border-right: 1px solid #000;
}

main {
    flex-grow: 1;
    padding: 20px;
}

<div>Here is my KINT debug output</div>
<div>Here is more KINT debug output</div>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Edit user</title>
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
        <main>Main stuff</main>
        <nav>Menu</nav>
    </body>
</html>

Answer 1

可能最好的解决方案是不要在身体上设置屈曲

添加一个div作为所有页面的容器，以及设置flex的位置

＆＃13;

html {
    height: 100%;
}

.mybody {
    min-height: 100%;
    display: flex;
    flex-flow: row-reverse;
}

nav {
    width: 150px;
    border-right: 1px solid #000;
}

main {
    flex-grow: 1;
    padding: 20px;
}

＆＃13;

<div>Here is my KINT debug output</div>
<div>Here is more KINT debug output</div>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Edit user</title>
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
      <div class="mybody">
        <main>Main stuff</main>
        <nav>Menu</nav>
        </div>
    </body>
</html>

＆＃13;

在html标记之外的元素上使用flexbox，这些元素会自动插入到正文中

1 个答案: