css - 如何使 flex-item 以 1:1 的比例调整大小并且 flex-container padding-left 和 padding-right 总是相同的

Question

当我调整窗口大小时，

flex-container 有不同的 padding-left 和 padding-right，这并不令人满意。

因此，考虑到具有（几乎）相同的 padding-left 和 padding-right 的容器以及 flex-item 保持 1:1 的比例，我想让 flex-item 可以在窗口大小发生变化时调整大小。

有可能吗？或者有没有其他方法可以在调整大小时让它变得不那么难看？

App.js

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [list, setList] = useState([
    { id: 1, fileName: "file 1" },
    { id: 2, fileName: "file 2" },
    { id: 3, fileName: "file 3" },
    { id: 4, fileName: "file 4" },
    { id: 5, fileName: "file 5" },
    { id: 6, fileName: "file 6" }
  ]);
  return (
    <div className="App">
      <div className="layout__container">
        <div className="list">
          {list.map((li) => {
            return (
              <figure title={li.fileName} key={li.id} className={"list__item"}>
                <div className="list__item__file">
                  <div className="list__item__file__name">{li.fileName}</div>
                </div>
              </figure>
            );
          })}
        </div>
      </div>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.layout__container {
  width: 100%;
  padding: 3rem 2rem 2rem 2rem;
  text-align: left;
  border: 1px solid black;
}

.list {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
  flex-grow: 1;
}
.list .list__item {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  background-color: white;
  border: 1px solid white;
  overflow: hidden;
  flex: 0 0 auto;
}
.list .list__item img {
  max-height: 100%;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list .list__item .list__item__file {
  background-color: #c3c4c7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.list .list__item .list__item__file .list__item__file__name {
  overflow: hidden;
  font-size: 0.9rem;
}
.list .list__item .ist__item__file .list__item__file__type {
  color: #8c8f94;
  font-size: 0.625rem;
  text-transform: uppercase;
  margin: 0 auto;
}

代码沙盒：
https://codesandbox.io/s/young-brook-o83f2?file=/src/App.js

Answer 1

您需要将所有元素的box-sizing 更正为border-box。然后您只需从list__item 中删除边距并将.list 中的justify-content 更改为center。这是代码：https://codesandbox.io/s/6p2vh