HTML
<div id="flexbox-container"> <h1 id="test1">test1</h1><h1 id="test2">test2</h1><h1 id="test3">test3</h1> </div>CSS
#flexbox-container { display:inline-flex; } #test1 { float:left; } #test2 { justify-content:center; align-items:center; text-align:center; align-self:center; align-content:center; } #test3 { position:relative; left:1000px; }¿Por qué test2 no se centra en el flex? Preferiría no tener que establecer px o margen para colocarlo en el centro. Intenté todo tipo de cosas de alineación en él, pero todavía se pega a la izquierda. Necesito que los tres elementos estén en línea, por lo que configurarlo para que se flexione no funcionaría (aunque sí se alinea en el centro si hago que se flexione), POR FAVOR, AYUDA, LO INTENTÉ DURANTE DÍAS
Solo esta cantidad de código es suficiente. No hay necesidad de todos esos estilos para etiquetas h1 separadas. Tienes que dar los estilos de alineación al div principal.
#flexbox-container { width: 100%; display:inline-flex; justify-content: space-between; } <div id="flexbox-container"> <h1 id="test1">test1</h1> <h1 id="test2">test2</h1> <h1 id="test3">test3</h1> </div>Usar ID para css es una mala práctica. Te sugiero que comiences a usar selectores de clase.
De todos modos, aquí está la solución a su problema:
<style> #flexbox-container { width: 100%; display: flex; justify-content: space-between; align-items: center; } </style>Básicamente, no es así como funciona Flex.
No desea que el contenido del segundo elemento se justifique dentro de sí mismo, desea que el contenedor tenga ese elemento centrado.
Si descarta todo el posicionamiento de los tres elementos, puede hacer que Flex haga el trabajo por usted. Hay varias formas de decirle cómo desea que los elementos se establezcan en la línea. Por ejemplo justify-content: space-between .
Desde MDN :
Los elementos se distribuyen uniformemente dentro del contenedor de alineación a lo largo del eje principal. El espacio entre cada par de elementos adyacentes es el mismo. El primer elemento está alineado con el borde de inicio principal y el último elemento está alineado con el borde de extremo principal.
#flexbox-container { display: inline-flex; justify-content: space-between; width: 100vw; } <div id="flexbox-container"> <h1 id="test1">test1</h1> <h1 id="test2">test2</h1> <h1 id="test3">test3</h1> </div>