具有一定数量的项目的flexbox等宽

Question

我正在尝试使用flexbox创建一个日历布局，它将始终有7个项目在一行。我被困在没有在parent上指定固定的with的情况下。

https://jsfiddle.net/t4ay065h/

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
  flex: 1;
  text-align: center;
}

Answer 1

您可以通过向子元素添加宽度来解决此问题。

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
  display: inline-block;
  margin:10px 0 0 10px;
  flex-grow: 1;
  text-align: center;
  width: calc(100% * (1/4) - 10px - 1px)
}

请参阅此jsfiddle。有关更多参考，请参阅how-to-force-a-flex-box-to-display-4-items-per-row后的stackoverflow。

Answer 2

我认为你需要在你的#日历div中添加‘flex-basis: 14.28%;’，如下所示

#calendar div {
  flex: 1;
  text-align: center;
  flex-basis: 14.28%;
}

Answer 3

尝试此代码

​

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
    text-align: center;
    margin: 10px 0 0 10px;
    height: 20px;
    flex-basis: calc(100%/8);
    background-color: red;
}

<div id="calendar">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
  <div>
    9
  </div>
  <div>
    10
  </div>
  <div>
    11
  </div>
  <div>
    12
  </div>
  <div>
    13
  </div>
  <div>
    14
  </div>
</div>

​