设置flexbox中的最大子项数量
设置flexbox中的最大子项数量
提问于 2021-07-06 03:03:37
.Cards {
justify-content: center;
display: flex;
align-items: center;
text-align: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
.Card {
text-align: center;
padding: 20px;
flex: 1 0 50%; // !
}
}我正在尝试让这个flexbox设置每行最多2个子对象。即使使用flex: 1 0 50%，我也得到了这样的结果：
为什么会发生这种情况？即使添加width: 50px也不起作用。
回答 2
Stack Overflow用户
发布于 2021-07-06 03:34:20
你没有提供html代码，所以我想这是可以的。现在看到你写的东西，你需要包装你的物品(你做到了)，但也需要给你的物品一个大小。你写的大小是以像素为单位的，并不代表半个屏幕，你可能打错了。以下是您需要的最低css：
.container {
display: flex;
flex-wrap: wrap;
}
.container > * {
width: 50%;
} 下面是一个组件来说明：
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
const App = () => {
return (
<div className="container">
<div>Hello</div>
<div>world</div>
<div>Here</div>
<div>I</div>
<div>Am</div>
</div>
);
};
render(<App />, document.getElementById('root'));Stack Overflow用户
发布于 2021-07-06 03:34:30
css中的一个技巧：
width: calc(100%/2);将此放入卡中
.Cards{
...
.Card{
width: calc(100%/2);
...
}
}有关计算的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/calc()
新的方法，这也很容易阅读。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68261012
复制相关文章
相似问题
腾讯云开发者
