使用 CSS 水平而不是垂直显示颜色列表

Question

I have a lit of colors that are currently displayed vertically, however i need something to spread out the color list width wise as and when they are added to the list. below are the screenshot:

Vertical List

that I need to make it look like:

In short its good to have 3-4 colors per row. How can achieve this in css?

The code is react: and below is the 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

From what I can see, just change the value for height in .main :

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

or try pixel values for height:

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

Answer 2

You can add to parent container this properies:

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

And add to child elements if you want 3 element per row : flex-basis: 33% or if you want 4 elements per row flex-basis:25% . Read here for more information.