title: Dynamically sizing elements based on row in flexbox
body: <p>I am trying to dynamically change button sizes based on which row each element falls in a flexbox container, similar to this: </p>
  
  <p><a href="http://i.stack.imgur.com/r9AvE.png" rel="nofollow">Internet Radio Genre example</a></p>
  
  <p>I am using ReactJS and have created an array containing various genres, which I hope to be resized. I am mapping over the array to create each button like so:</p>
  
  <pre><code>class ButtonContainer extends React.Component {
    constructor(props) {
      super(props);
    };
    render() {
      let items = this.props.data;
      let anItem = items.map((item, i) =&gt; {
        return (
        &lt;button className='singleButton'&gt;{item}&lt;/button&gt;
      )
      });
      return (&lt;div className='buttonContainer'&gt;{anItem}&lt;/div&gt;)
    }
  }
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.buttonContainer {
    display:flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top:1.5rem;
  }
  </code></pre>
  
  <p>I am wondering if there is a way to select which items that fall after a specific breakpoint with JS or CSS? There may just be a totally different way to go about this that has not occurred to me also. </p>
  
  <p><a href="https://jsfiddle.net/69z2wepo/54703/" rel="nofollow">JSFiddle example</a></p>
  
  <p>Thanks!</p>