Polygon Widget (练习了flex-basis flex-grow flex-shrink)

index.html

<div class="container">
  <div class="box">
    <h3>Rick and Morty the Game review: a fun romp blah blah</h3>
  </div>
  <div class="box middle">
    <h3>Lord of the Ring Seventeen million review: a fun romp blah blah</h3>   </div>
  <div class="box">
    <h3>Game of Thrones the game review: a fun romp blah blah</h3>
  </div>
</div>

polygon-widget-starter.markdown

Polygon Widget Starter

A Pen by liuxiaomingskm on CodePen.

License.

style.css

.container{
  display:flex;
  flex-wrap:wrap;
  
  
}
.box {
  background:#cc0042;
  flex:1 1 200px; // flex 1(grow) 1(shrink）200px(basis)
/*   flex-basis:200px;
  flex-grow: 1; */
  color:white;
  font-family: Helvetica;
  padding:20px;
  transition:1s background;
}
.middle {
  background:#b20039;
  
}
.box:hover {
  background: #ff0052;
}
h3 {
  font-size: 30px;
}