響應式分配DIV欄位

display:flex; flex-wrap:wrap; justify-content:center;

by wllai2001

HTML

<DIV CLASS="FATHER">
  <DIV CLASS="BOX">
  1
  </DIV>
  <DIV  CLASS="BOX">
  2
  </DIV>
  <DIV  CLASS="BOX">
  3
  </DIV>

</DIV>

CSS

.FATHER{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;  
  
}
.BOX{
  /*維持最小寬度200px*/
  flex:1 1 200px; 
  margin:5px;
  border:1px solid #ccc;
  height:200px;
  
}