0
313
Viewsflexbox: cómo hacer que 2 elementos flexibles tengan el mismo ancho
Quiero que 2 elementos flexibles tengan el mismo ancho, sin importar cuál sea el ancho del contenido.
Después de configurar flex: 1 1 0; en flex-item, todavía no funciona como se esperaba
porque espero que el ancho de ME sea el mismo que Everyone
Aplicación.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 Tabestilo.css
.tab { display: flex; } .tab .tab__item { flex: 1 1 0; // not working border: 1px solid #c3c4c7; padding: 0.1rem 0.2rem; }
·
Juan Pablo Isaza
2 answers
Answer question0
Puede estar relacionado con sus otros estilos en otro lugar, pero podría probar esto
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>
·
Juan Pablo Isaza
Report
0
¿Tal vez esto?
.tab .tab__item { flex-basis: 50%; border: 1px solid #c3c4c7; padding: 0.1rem 0.2rem; }
·
Juan Pablo Isaza
Report
Answer question