如何用Flexbox修改react-datepicker月份布局为每行3个横向排列

要实现每行3个月份的布局，你之前的Flex方向设置逻辑有误，调整以下CSS即可解决：

.react-datepicker__month-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 309px;
  justify-content: flex-start;
  gap: 0; /* 可选：消除月份间的默认间隙 */
}

.react-datepicker__month {
  margin: 0;
  padding: 10px 0;
  width: calc(100% / 3);
  text-align: center;
  display: block;
}

关键调整说明： #

• .react-datepicker__month-wrapper改为横向排列并开启换行，固定309px宽度确保超出后自动换行，左对齐保证月份从左到右排列
• 每个.react-datepicker__month设置为容器宽度的1/3，刚好每行容纳3个；去掉默认margin避免布局偏移，保持文字居中

如果月份内部的日期按钮排版有异常，可额外调整.react-datepicker__day的padding或宽度，但核心布局问题靠上述代码就能解决。

内容的提问来源于stack exchange，提问作者Honey Singh