css - 如何在调整窗口大小时连续制作弹性项目3并保持1：1的比例[重复]

Posted 2023-03-06

【中文标题】css - 如何在调整窗口大小时连续制作弹性项目3并保持1：1的比例[重复]

【英文标题】：css - how to make flex item 3 in a row and keeping 1:1 ratio when resizing window [duplicate]

【发布时间】：2021-11-05 18:33:34

【问题描述】：

我想在调整窗口大小时使弹性项目连续 3 个并保持 1:1 的比例。

App.js

import "./styles.css";

export default function App() 
  return (
    <div className="App">
      <div className="container">
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
        <div className="item">123</div>
      </div>
    </div>
  );

styles.css

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


.container 
  display: flex;
  justify-content: flex-start;
  border: 1px solid orange;
  flex-wrap: wrap;
  padding: 1rem;


.item 
  flex-basis: 30%;
  border: 1px solid grey;
  margin: 0.1rem;

代码沙盒：https://codesandbox.io/s/elegant-hamilton-iiwrh?file=/src/App.js

我该怎么做？

【问题讨论】：

调整窗口大小时1:1 比例是什么意思？

@GalAbra 我希望 flex-item 在调整大小时保持为正方形

@GalAbra 如果你使用wordpress，你可以去媒体页面调整窗口大小

我仍然不明白预期的行为。你能附上你提到的例子的截图吗？

【参考方案1】：

您应该使用display: grid 来表示.container 和aspect-ratio: 1/1 来表示.item

.container 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;


.item 
  background-color: #1eaafc;
  background-image: linear-gradient( 130deg, #6c52d9, #1eaafc 85%, #3edfd7);
  border-radius: 4px;
  border: 6px solid #171717;
  box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
  color: #fff;
  aspect-ratio: 1/1;

<div class="container">
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
  <div class="item">123</div>
</div>

---

aspect-ratio

aspect-ratio CSS 属性设置框的首选纵横比，将用于计算自动尺寸和其他一些布局功能。

所以，aspect-ratio:1/1 确保attr.width === attr.height 始终。

'fr' unit for grid layout

CSS 网格布局引入了一种新的长度单位，称为 fr，它是“分数”的缩写。 MDN 将 fr 单位定义为表示网格容器中可用空间的一小部分的单位。

所以对于 3 列布局，我们可以编写，

grid-template-columns: 1fr, 1fr, 1fr;

重复符号 - 如果您发现自己重复长度单位，请使用 CSS repeat() 函数

grid-template-columns: repeat(3, 1fr);

【讨论】：

使用“aspect-ratio”是最简单的方法，但如果您需要 Safari 支持，它将无法工作。它不适用于旧版本的 Chrome 或 Firefox (2020/2021)。如果 OP 需要 Safari 的浏览器支持，我建议使用填充方法。

@Arthur: safari 支持aspect-ratio developer.mozilla.org/en-US/docs/Web/CSS/…

【参考方案2】：

改用网格系统怎么样？ https://codesandbox.io/s/naughty-ganguly-lzdg9

更多信息：https://developer.mozilla.org/fr/docs/Web/CSS/grid