flex-wrap属性不生效如何解决？flexbox入门布局问题排查

当前你遇到的布局效果如下：

核心错误点 #

• flex-wrap是flex容器专属属性，仅对设置了display:flex的容器本身生效，你给作为子项的.box类添加flex-wrap: wrap属于无效配置，没有任何作用
• 左容器.left-side的主轴方向为纵向flex-direction: column，但没有设置固定高度，默认会自动适配所有纵向排列子元素的总高度，永远不会出现主轴空间不足的情况，自然无法触发换行
• 存在类名冲突问题，你把.right-side类同时加在了右侧外层flex容器和内部的.box子项上，导致内部box也被设置为display:flex，干扰了子项的尺寸和布局计算
• 如果你期望外层.container触发换行，当前.left-side和.right-side的总宽度远小于container设置的1000px，没有超出容器宽度自然不会触发wrap

修复代码 #

修正后HTML #

<div class="container">
  <div class="left-side">
    <div class="box left-box">1</div>
    <div class="box left-box">2</div>
    <div class="box left-box">3</div>
    <div class="box left-box">4</div>
  </div>
  <div class="right-side">
    <div class="box right-box">5</div>
    <div class="box right-box">6</div>
    <div class="box right-box">7</div>
    <div class="box right-box">8</div>
  </div>
</div>

修正后CSS #

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1000px;
  height: 100px;
  border: 22px red solid;
}
.box{
  width: 50px;
  height: 50px;
  border: 2px solid black;
}
.right-side{
  display: flex;
  flex-wrap: wrap;
  /* 按需设置宽度，超出后自动换行，示例设置宽度为120px，仅能放下2个横向排列的box */
  width: 120px;
}
.left-side{
  display: flex; 
  flex-direction: column;
  flex-wrap: wrap;
  /* 给左容器设置固定高度，小于4个box纵向排列的总高度，触发换行 */
  height: 120px;
  /* 预留换行后的列宽度 */
  width: 130px;
}

修复后效果说明 #

• 左侧容器高度120px，仅能放下2个总高为54px（含上下边框）的box，剩余2个box会自动换到第二列显示
• 右侧容器宽度120px，仅能放下2个总宽为54px（含左右边框）的box，剩余2个box会自动换到第二行显示
• 如果需要外层container换行，可调整左右容器总宽度大于1000px即可触发

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