Bien, entonces mi código no es complejo en absoluto. Estoy viendo un tutorial sobre componentes con estilo de reacción y mi código llegó a este punto:
const Container = styled.div `height: 60px; ` const Wrapper = styled.div` padding : 10px 20px; display : flex; justify-content : space-between; ` const Left = styled.div` flex : 1; ` const Center = styled.div` flex: 1; ` const Right = styled.div` flex : 1; `Este es el resto del código:
const Navbar = () => { return ( <Container> <Wrapper> <Left>loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</Left> <Center>Center</Center> <Right>Right</Right> </Wrapper> </Container> ) } export default NavbarEntonces, lo que básicamente está sucediendo es que creé 3 componentes en la misma línea llamados componentes Izquierda, Centro y Derecha y los puse dentro de un componente Wrapper. Lo que se supone que hace el atributo flex es dar a los componentes izquierdo, central y derecho el mismo espacio en el navegador. Lo que significa que si hay una cadena larga dentro de Left (como se ve arriba), los componentes Center y Right mantienen sus posiciones y no se empujan hacia un lado para acomodar Left. Está destinado a funcionar, pero cuando abro mi navegador, esto es lo que veo:
centroDerecha
lo que significa que el atributo flex obviamente no funciona? así que alguien sabe lo que estoy haciendo mal? y, por cierto, el tutorial que estoy viendo acaba de salir en septiembre de 2021, así que dudo que se deba a un cambio en la sintaxis o algo así, pero si es el caso, indíquelo.
Esto se debe a que flex intenta ajustar el tamaño de acuerdo con sus proporciones organizándose alrededor de los límites de los elementos, o palabras en el caso del texto.
Pero no es una regla absoluta. Dado que tiene una palabra gigantesca que no se puede envolver, flex hace lo mejor que puede hacer bajo esta condición. Similar a cómo normalmente no querrías romper u ocultar partes de un botón grande para respetar las proporciones a toda costa. Esto se llama desbordamiento.
Su CSS debería funcionar si tiene diferentes tamaños de párrafo con palabras normales.
Una opción es ocultar el desbordamiento o mostrar una barra de desplazamiento:
const Left = styled.div` flex : 1; overflow: hidden; # also scroll # text-overflow: ellipsis; # Optional to show a nicer "Loremmmmm..." `Alternativamente, puede permitir el ajuste en el límite de la letra: dividir las palabras largas también hará que se puedan lograr proporciones flexibles:
const Left = styled.div` flex : 1; overflow-wrap: anywhere; `