SHAWN-TIPS01flex布局-自动换行-平分整个盒子

前言

日常开发最常见需求

需求

在一个不固定宽度的盒子内 每行放4个盒子 超出自动换行 且每个盒子距离右边10px

.box {
  width: 400px;
  height: 200px;
  margin-left: 50%;
  margin-top: 200px;
  transform: translate(-50%);
  border: 1px solid #ccc;
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
}
.item {
  width: calc((100% - 40px)/4);
  height: 50px;
  border: 1px solid pink;
  margin-right: 10px;
}
.item:nth-of-type(4n+0) {
  margin-right: 0;

}

import React from "react";
import './App.css';
function Demo01() {
    let arr = Array.from({ length: 8 }, (v, k) => k);
    return (
        <div className={"box"}>
            {arr && arr.map((item, index) => {
                return <div className={"item"} key={index}>{index}</div>
            })}
        </div>  
    ) 
}
export default Demo01