Question

我正在尝试学习flexbox，我正在尝试实现以下布局。

+----------+----------+
|          |nav       |
|  header  +----------+
|          |section   |
+----------+----------+

HTML结构

<header></header>
<nav></nav>
<section></section>

布局要求

每个元素的宽度恰好是50vw（或50％）
标题内容始终居中并固定。拿起100vh。
导航内容已修复
节内容可滚动，溢出隐藏。

这对Flexbox来说是否可行？

在移动设备上，我希望将所有三个放在一个列中，但这部分很容易。

Answer 1

＆＃13;

body {
  display: flex;
  flex-flow: column wrap;
  height: 100vh; /* key rule; this tells flex items where to wrap
                    to form second column */
}

header {
  flex: 0 0 100%;
  width: 50%;

  /* center content */
  display: flex;
  justify-content: center;
  align-items: center;
}

nav, section {
  flex: 0 0 50%;
  width: 50%;
}

/* non-essential decorative styles */
*       { box-sizing: border-box; margin: 0; }
header  { background-color: aqua; }
nav     { background-color: tomato; }
section { background-color: lightgreen; }

＆＃13;

<header>header</header>
<nav>nav</nav>
<section>section</section>

＆＃13;

有关详细说明和替代方法，请参阅我的答案：

Is it possible for flex items to align tightly to the items above them?

Answer 2

如果你想使用flexbox，你可以放弃进行双容器布局。

<强> HTML

package main

import (
        "log"
        "net/http"
)

func serveIDE(w http.ResponseWriter, r *http.Request) {
        http.FileServer(http.Dir("/home/user/ide")).ServeHTTP(w, r)
}

func serveConsole(w http.ResponseWriter, r *http.Request) {
        http.FileServer(http.Dir("/home/user/console")).ServeHTTP(w, r)
}

type wHandler struct {
        fn http.HandlerFunc
}

func (h *wHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
        log.Printf("Handle request: %s %s", r.Method, r.RequestURI)
        defer log.Printf("Done with request: %s %s", r.Method, r.RequestURI)
        h.fn(w, r)
}

func main() {
        http.Handle("/ide", http.StripPrefix("/ide", &wHandler{fn: serveIDE}))
        http.Handle("/console", http.StripPrefix("/console", &wHandler{fn: serveConsole}))
        err := http.ListenAndServe(":9090", nil)
        if err != nil {
                log.Fatal("ListenAndServe: ", err)
        }
}

<强> CSS

<div class="flex-container">
<header>Something</header>
<div class="flex-child-container">
<nav>nav</nav>
<section>section</section>
</div>
</div>

带有固定div的两列flexbox布局

2 个答案: