Question

我正在尝试使用具有3个div的flexbox创建标题：left = navigation，center = logo，right = social icons / links。我遇到的问题是我的标题中的每个div都不均匀，因此徽标不直接直接在标题中居中。

我想如果我将flex-grow属性设置为1，那么每个部分的宽度都相同。

这是我的代码：

<html>
<head>

<style>

*, *:before, *:after {
    box-sizing:border-box;
}

body {margin: 0}

.header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    position: relative;
    width: 100%;
    padding:25px 20px;
    background-color:#f0f0f0;
}

.header__left {
    flex-grow:1;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.header__center {
    flex-grow:1;
    -webkit-align-items: center;
    align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
}

.header__right {
    flex-grow:1;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right;
}

</style>

</head>
<body>
<header class="header">
    <div class="header__left">
        <nav class="header__navigation">
            <a href="#">Menu</a>
        </nav>
    </div>
    <div class="header__center">
        <div class="header__logo">Flexbox</div>
    </div>
    <div class="header__right">
        <div class="header__social">
            <a href="#" class="social--links">Facebook</a>
            <a href="#"class="social--links">Twitter</a>
        </div>
    </div>
</header>
</body>
</html>

Answer 1

使用flex:1;代替flex-grow:1;

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.header {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 100%;
  padding: 25px 20px;
  background-color: #f0f0f0;
}
[class*="header__"] {
  border: 1px solid green;
}
.header__left {
  flex: 1;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.header__center {
  flex: 1;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}
.header__right {
  flex: 1;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  text-align: right;
}

<header class="header">
  <div class="header__left">
    <nav class="header__navigation">
      <a href="#">Menu</a>
    </nav>
  </div>
  <div class="header__center">
    <div class="header__logo">Flexbox</div>
  </div>
  <div class="header__right">
    <div class="header__social">
      <a href="#" class="social--links">Facebook</a>
      <a href="#" class="social--links">Twitter</a>
    </div>
  </div>
</header>

Flexbox不会在包含3个div的标头中创建偶数列

1 个答案: