Question

我正在尝试使用Flexbox实现导航栏的以下布局。我陷入了div的对齐。这是它应该如何：

Sample DIV Layout

这是我用Divs和CSS构建的。但我不知道如何对齐这些div，以便我得到理想的结果。

* {
  box-sizing: border-box;
}

#nav {
  display: flex;
}

#logo {
  width: 100px;
  heigth: 100px;
  background-color: black;
  margin-left: 24px;
}

<div id="nav">
  <div id="logo">
    100x100px Logo
  </div>
  <div id="left_side">
    <div id="top_nav">
      <div id="title">TITLE OF PAGE</div>
      <div id="menu_swith">SWITCH</div>
    </div>
    <div id="bottom_nav">
      <div class="nav_item">Menu 1</div>
      <div class="nav_item">Menu 2</div>
      <div class="nav_item">Menu 3</div>
      <div class="nav_item">Menu 4</div>
    </div>
  </div>
</div>

Answer 1

我会为一些子div添加一些flex容器。我还指定#left_side div上的宽度和弯曲方向，并证明#top_nav div上的内容。

尝试下面的代码段或看到此updated fiddle：

＆＃13;

* {
  box-sizing: border-box;
}

#nav,
#left_side,
#top_nav,
#bottom_nav {
  display: flex;
}

#left_side {
  flex-direction: column;
  width: 100%;
}

#top_nav {
  justify-content: space-between;
}

#logo {
  width: 100px;
  heigth: 100px;
  background-color: black;
  margin-left: 24px;
}

＆＃13;

<div id="nav">
  <div id="logo">
    100x100px Logo
  </div>
  <div id="left_side">
    <div id="top_nav">
      <div id="title">TITLE OF PAGE</div>
      <div id="menu_swith">SWITCH</div>
    </div>
    <div id="bottom_nav">
      <div class="nav_item">Menu 1</div>
      <div class="nav_item">Menu 2</div>
      <div class="nav_item">Menu 3</div>
      <div class="nav_item">Menu 4</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

Flexbox有很多很好的指南。这个非常好：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

您的布局可以通过添加以下CSS来实现

fiddle

＆＃13;

* {
  box-sizing: border-box;
}

#nav {
  display: flex;
}

#logo {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-left: 24px;
}

#left_side {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#top_nav {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

#bottom_nav {
  display: flex;
  flex: 1;
}

＆＃13;

<div id="nav">
  <div id="logo">
    100x100px Logo
  </div>
  <div id="left_side">
    <div id="top_nav">
      <div id="title">TITLE OF PAGE</div>
      <div id="menu_swith">SWITCH</div>
    </div>
    <div id="bottom_nav">
      <div class="nav_item">Menu 1</div>
      <div class="nav_item">Menu 2</div>
      <div class="nav_item">Menu 3</div>
      <div class="nav_item">Menu 4</div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

Flexbox是构建布局的一种方法。您需要额外的容器才能使其正常工作。

但是，如果您想保持简单，请使用CSS Grid：

＆＃13;

header {
  display: grid;
  grid-template-columns: 100px 3fr 1fr;
  grid-template-rows: 50px 50px;
  grid-template-areas: " logo title switch " 
                       " logo  nav   nav   ";
}

#logo        { grid-area: logo; }
#title       { grid-area: title; }
#menu_switch { grid-area: switch; }
nav          { grid-area: nav; display: flex; }

nav > a {
  flex: 0 0 75px;
  margin: 5px;
  border: 2px solid green;
}

/* for demo only */
#logo        { background-color: lightgray; }
#title       { background-color: pink; }
#menu_switch { background-color: skyblue; }
nav          { background-color: lightgreen; }
*            { box-sizing: border-box; }
div, a       { display: flex; align-items: center; justify-content: center;
               text-align: center; }

＆＃13;

<header>
  <div id="logo">100x100px<br>Logo</div>
  <div id="title">Page Title</div>
  <div id="menu_switch">Switch</div>
  <nav>
    <a class="nav_item">Menu 1</a>
    <a class="nav_item">Menu 2</a>
    <a class="nav_item">Menu 3</a>
    <a class="nav_item">Menu 4</a>
  </nav>
</header>

＆＃13;

jsFiddle demo

有关上述网格规则和浏览器支持数据的说明，请参阅以下帖子：

如何使用Flexbox对齐级联div容器

3 个答案:

jsFiddle demo