使用CSS

Question

我有一些当前垂直显示的颜色，但是当我们将颜色列表添加到列表时，我需要一些方法来展开颜色列表的宽度。以下是截图：

垂直清单

我需要让它看起来像：

简而言之，每行有3-4种颜色。如何在css中实现这一目标？

代码是反应：下面是css。

  render() {
    return (
        <div styleName={main}>
          <DropDownButton>
              {this.mapItems(colors)}
          </DropDownButton>
        </div>
    );
  }
 createListItem(color) {
        return (
            <a href="#" styleName={colorAll}>
              <span style={{background:"#"+color}} styleName={spanStyle}>

              </span>
            </a>
        )
      }

      mapItems(colors) {
        return colors.map(this.createListItem.bind(this));
      }

的CSS：

.main {
  height: 100%;
  float: left;
  width: 600px;
}
.spanStyle {
  display: block;
  height: 20px;
  line-height: 20px;
  width: 20px;
  &:hover {
    background-color: transparent;
  }
}

.colorAll {
  padding: 2px;
}

Answer 1

从我看到的情况来看，只需更改height中.main的值：

.main {
  height: 50%;
  float: left;
  width: 600px;
}

或尝试高度的像素值：

.main {
  height: 70px;
  float: left;
  width: 600px;
}

Answer 2

您可以向父容器添加此属性：

display: flex;
flex-direction:row:
flex-wrap:wrap:

如果您想要每行3个元素，请添加到子元素：flex-basis: 33%或者每个row flex-basis:25%需要4个元素。请阅读here以获取更多信息。