Как равномерно распределить маржу с помощью flex?

Question

Я хочу отобразить пользовательский интерфейс в виде картинки, и я использую al oop для создания div, так что я думаю, что flex - самый убедительный способ сделать это. каждая строка отображает четыре элемента, и я хочу установить поле (верхний левый и правый нижний) каждого flex-элемента одинаковыми 10px. Я пробовал justify-content: space -ween / space-around. и ничего из этого я не хочу.

class App extends Component {
  constructor() {
    super();
    this.arr = [1, 2, 3, 4, 5];
  }

  createDiv = () => {
    // return  div className="child" />
  };

  render() {
    return (
      <div className="contianer">
        {this.arr.map((item, index) => (
          <div className="child" />
        ))}
      </div>
    );
  }
}

.contianer{
   /* width: calc(100%-20px); */
  display:flex;
  flex-flow: row wrap;
  background-color: gray;
  justify-content: space-between
  /* flex:1; */
}

.child{
  background-color: yellow;
  width: calc((100% - 50px) / 4);
  height: 100px;
  margin: 10px 5px

}

онлайн-демонстрация: https://stackblitz.com/edit/react-fapbff

так что есть способ достичь того, чего я хочу?

Answer 1

Вот пример для этого. Вы можете попробовать этот код. Это полностью проверено. Я надеюсь, что это поможет вам.

CSS:

.contianer {
  display: grid;
  background-color:red;
  grid-column-gap: 10px;
  grid-template-columns: auto auto auto auto;
  grid-row-gap: 10px;
  padding: 10px;
}
.child {
  background-color: yellow;
  height: 100px;
}

Используя сетку, вы можете добиться этого. Я проверял этот код в вашей демоверсии "https://stackblitz.com/edit/react-fapbff". Работает нормально.

Answer 2

Если вам это нужно с гибким макетом, вы можете использовать align-item и height для вертикального пространства.

см. Ниже css

 .contianer{

  display:flex;
  flex-flow: row wrap;
  background-color: gray;
  justify-content: space-between;
  align-items: space-between;
  height: 230px;
  padding:10px 0 0 10px

}

.child{
  background-color: yellow;
  width: calc((100% - 40px) / 4);
  height: 100px;

} 

, но для полного контроля над макетом вы можете использовать сетку.