使用flexbox对齐内容时align-content与justify-content失效如何解决？

核心问题排查 #

你现有代码的布局逻辑冲突，主要有4个错误点：

1. 承载颜色选项的父容器.colorLists没有开启flex布局，反而设置了浮动，无法实现自动换行排列
2. 单个颜色项.colorLayout没有设置固定宽度，无法控制每行容纳的元素数量
3. 颜色选择label的top属性缺少单位，且没有做居中处理，导致元素位置错位
4. 所有checkbox共用同一个id，点击label会触发错位

修改方案 #

1. CSS代码修改

调整.colorLists和.colorLayout的样式，其余原有样式可以保留：

.contentsWrapper {
    display: flex;
    width: 100%;
    height: 1000px;
    padding: 5px;
    .contentsSide {
      width: 280px;
      padding-left: 48px;
      padding-right: 48px;
      .HorizontalLine {
        width: 160px;
        margin-bottom: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.3);
      }
      .colors {
        display: flex;
        flex-direction: column;
        span {
          margin-bottom: 20px;
        }
        .colorLists {
          margin-left: 10px;
          /* 新增以下样式，删掉原有float:left */
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          gap: 15px 3px;
          padding: 0;
          list-style: none;
          .colorLayout {
            /* 删掉原有float:left、margin-left、margin-right */
            width: calc(33.33% - 6px);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            label {
              background-color: beige;
              border: 1px solid #ccc;
              border-radius: 50%;
              cursor: pointer;
              height: 28px;
              width: 28px;
              /* 修改定位逻辑 */
              left: 50%;
              transform: translateX(-50%);
              position: absolute;
              top: 0;
              &:after {
                border: 2px solid #fff;
                border-top: none;
                border-right: none;
                content: '';
                height: 6px;
                left: 7px;
                opacity: 0;
                position: absolute;
                top: 8px;
                transform: rotate(-45deg);
                width: 12px;
              }
            }
            input[type='checkbox'] {
              visibility: hidden;
              /* 新增高度占位置 */
              height: 28px;
              margin: 0;
            }
            input[type='checkbox']:checked {
              & + label {
                background-color: beige;
                border-color: beige;
                &:after {
                  opacity: 1;
                }
              }
            }

            .productColor {
              margin-top: 8px;
              font-size: 13px;
              text-align: center;
              height: 25px;
              line-height: 25px;
            }
          }
        }
      }
      .sizes {
        .HorizontalLine {
        }
        .span {
        }
        .sizeLists {
          margin-top: 20px;
          margin-bottom: 20px;
          button {
            margin: 5px;
          }
        }
      }
    }
}

2. JSX代码修改

解决checkbox id重复的问题，React中要用htmlFor代替原生的for属性：

<ul className="colorLists">
  {COLOR_LISTS.map((color, index) => {
    // 生成唯一的checkbox id
    const checkboxId = `color_${index}_${color.color_name}`;
    return (
      <li className="colorLayout" title={color.color_name}>
        <input type="checkbox" id={checkboxId} />
        <label
          htmlFor={checkboxId}
          style={{ backgroundColor: color.colorProps }}
        />
        <span className="productColor">{color.color_name}</span>
      </li>
    );
  })}
</ul>

修改后即可实现每行均匀排布3个颜色选项的效果。

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