flexbox - 如何使 2 个 flex-item 具有相同的宽度答案

【问题标题】：flexbox - how to make 2 flex-item have same widthflexbox - 如何使 2 个 flex-item 具有相同的宽度
【发布时间】：2021-09-09 18:02:08
【问题描述】：

我希望 2 个 flex-item 具有相同的宽度，无论内容的宽度是多少。

在弹性项目上设置flex: 1 1 0; 后，它仍然无法按预期工作
因为我预计ME 的宽度将与Everyone 相同

App.js

import React from 'react'

import "./style.css";

function Tab() {
    return (
        <div className="tab">   
            <div className="tab__item">Me</div>
            <div className="tab__item">Everyone</div>
        </div>
    )
}

export default Tab

style.css

.tab {
  display: flex;
}
.tab .tab__item {
  flex: 1 1 0; // not working
  border: 1px solid #c3c4c7;
  padding: 0.1rem 0.2rem;
}

【问题讨论】：

flex:1 1 0 代表：flex-grow flex-shrink 和 flex-basis 设置为 0 ，使用 auto 代替它可以扩展。
@CCCC 您的示例代码单独工作正常，所以我怀疑其他地方有问题。如果您检查实际站点中的元素，您是否看到正确应用了样式？这是您的代码工作的示例：jsfiddle.net/andreasvirkus/bdste4r5

标签： javascript css reactjs flexbox

【解决方案1】：

这可能与你在其他地方的其他风格有关，但你可以试试这个

    function App() {
    return (
        <div className="tab">   
            <div className="tab__item">Me</div>
            <div className="tab__item">Everyone</div>
        </div>
    )
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

.tab {
  display: flex;
}
.tab .tab__item {
  width: 100%;
  border: 1px solid #c3c4c7;
  padding: 0.1rem 0.2rem;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

【讨论】：

我在容器和项目上添加width: 100% 后发现它可以工作。

【解决方案2】：

也许是这个？

.tab .tab__item {
  flex-basis: 50%;
  border: 1px solid #c3c4c7;
  padding: 0.1rem 0.2rem;
}

【讨论】：