Question

我尝试使用flexbox创建日历布局，它总是连续有7个项目。我没有在父母那个指定固定的情况下坚持做到这一点。

#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。有关更多参考，请参阅此stackoverflow帖子how-to-force-a-flex-box-to-display-4-items-per-row。

Answer 2

我认为你需要添加＆＃39; flex-basis：14.28％;＆＃39;你的#calendar div就像这样

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

Answer 3

试用此代码

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 4

在您添加flex item的{{1}}属性时，默认情况下根据1水平width水平each items，这就是为什么{ {1}}不起作用，而是添加如下，

flex属性指定项目的长度，相对于其余的灵活物品在同一个容器内。

width of container

flex:wrap

flexbox等于一定数量的项目

4 个答案: