Question

我刚刚发现了CSS3的display: flex;属性并尝试将其应用到我网站的粘贴标题中，但我遇到了问题。

目标是在标题的整个宽度上均匀地分隔所有链接，但是当使用例如<nav>标记对元素进行语义分组时，这似乎是不可能的。

参见jsfiddle示例：https://jsfiddle.net/9bua0n7o/

<header>
  <div class="logo">
   Logo
  </div>

  <nav class="navigation">
    <a href="#">Home</a>
    <a href="#">FAQ</a>
    <a href="#">Contact</a>
  </nav>

  <div class="search">
    <a href="#">Search</a>
  </div>

  <div class="login">
   <a href="#">Register</a>
   <a href="#">Login</a>
  </div>

</header>

CSS：

header {
    width: 100%;
    height: 60px;
    line-height: 60px;

    display: flex;
    flex-flow: row wrap;    
    justify-content: space-between;

    position: fixed;
    top: 0;
    left: 0;

    padding: 0 25px;
    box-sizing: border-box;

    background: #ccc;
}

Answer 1

你可以这样做。

在这里，我为每个包装器（导航，搜索等）提供了与他们拥有的孩子数量相匹配的弹性值。

这基本上意味着包装器会占用大部分可用空间并使物品均匀分布。

然后我将每个链接设置为flex: 1，使它们占据整个空间。

header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-flow: row wrap;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
  box-sizing: border-box;
  background: #ccc;
}

header .logo,
header .search {
  flex: 1;
  display: flex;
}

header .navigation {
  flex: 3;
  display: flex;
}

header .login {
  flex: 2;
  display: flex;
}

header .navigation a,
header .search a,
header .login a {
  flex: 1;
}

<header>
  <div class="logo">
    Logo
  </div>

  <nav class="navigation">
    <a href="#">Home</a>
    <a href="#">FAQ</a>
    <a href="#">Contact</a>
  </nav>

  <div class="search">
    <a href="#">Search</a>
  </div>

  <div class="login">
    <a href="#">Register</a>
    <a href="#">Login</a>
  </div>

</header>

Answer 2

我提出的解决方案与上面的 LGSon 类似（虽然不完全相同）。

1）我添加了.logo的链接：

<div class="logo">
<a href="#">Logo</a>
</div>

2）然后我将所有标题中的元素赋予了相同的flex样式：

.logo,
.logo a,

.navigation,
.navigation a,

.search,
.search a,

.login,
.login a {
flex: 1 0 auto;
}

3）最后，我覆盖flex-grow和.navigation的{{1}}个样式：

.login

完整示例：

.navigation {
flex-grow: 3;
}

.login {
flex-grow: 2;
}

header, .logo, .navigation, .search, .login {
display: flex;
justify-content: space-between;
}

.logo, .navigation, .search, .login, .logo a, .navigation a, .search a, .login a {
flex: 1 0 auto;
}

.navigation {
flex-grow: 3;
}

.login {
flex-grow: 2;
}

header {
width: 100%;
height: 60px;
line-height: 60px;

position: fixed;
top: 0;
left: 0;

padding: 0 25px;
box-sizing: border-box;
background: #ccc;
}

Answer 3

虽然（截至2016年7月）肯定不是生产就绪解决方案，但CSS Display Module Level 3 Working Draft定义了display: contents属性，它决定了：

元素本身不会生成任何框，但其子元素和伪元素仍然会正常生成框。为了生成框和布局，必须将元素视为已在文档树中替换为其子元素和伪元素。

应用于您的解决方案，它可能看起来像这样（目前仅在Firefox中支持）：

＆＃13;

header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
  box-sizing: border-box;
  background: #ccc;
}

.header-section {
  display: contents;
}

.header-section a {
  flex: 1;
}

＆＃13;

<header>
  <div class="logo">
    Logo
  </div>

  <nav class="header-section navigation">
    <a href="#">Home</a>
    <a href="#">FAQ</a>
    <a href="#">Contact</a>
  </nav>

  <div class="header-section search">
    <a href="#">Search</a>
  </div>

  <div class="header-section login">
    <a href="#">Register</a>
    <a href="#">Login</a>
  </div>
</header>

＆＃13;

希望这至少提供了一些关于提议的新CSS功能的教育

如何在降序元素上应用CSS3 flex样式？

3 个答案: