Jean-Louis De La Marre
Tengo un flexbox de dirección de fila anidado en un flexbox de dirección de columna, pero cuando quiero usar align-content en el niño, no funciona.
cuando reemplazo display:flex del padre por un display:blockfunciona.
En el siguiente código, podemos ver que .row align-content: flex-end; no funciona Pero si reemplazo el .column display: flex; con display: block;el align-content: flex-end; obras.
¿Es posible arreglar esto, por favor?
body {
background-color: grey;
}
.column {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
background-color: green;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-end;
align-items: center;
background-color: red;
}
.row-test {
min-height: 200px;
}
span {
width: 30%;
background-color: orange;
}<body class="column">
<section class="row row-test">
<span>Test Test Test Test Test Test Test Test Test</span>
<span>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</span>
</section>
</body>
miguel benjamin
El hecho de que align-content “funciona” cuando el contenedor flexible principal se cambia a display: block es simplemente un error del navegador.
Cambia los elementos flexibles a la parte inferior, como se desee, pero solo en firefox.
En Chrome no hace nada, que es el comportamiento correcto (según la especificación).
Y en IE11 desplaza los elementos a la parte superior (también no conforme).
Estos son errores e inconsistencias en los que no se debe confiar como guía, ya que no ayudan a explicar cómo funciona el align-content obras de propiedad.
en un contenedor flexible de una líneacomo el de la pregunta, align-content no tiene efecto. La propiedad a utilizar es align-items.
en un contenedor flexible de varias líneasla propiedad a utilizar es align-content.
También el align-self La propiedad está estrechamente relacionada con align-items. Uno está diseñado para anular al otro. Ambos funcionan juntos.
De la especificación:
8.3. Alineación del eje transversal: la
align-itemsyalign-selfpropiedades
align-itemsestablece la alineación predeterminada para todos los elementos del contenedor flexible, incluidos los elementos flexibles anónimos.align-selfpermite anular esta alineación predeterminada para elementos flexibles individuales.8.4. Packing Flex Lines: la
align-content
propiedadEl
align-contentLa propiedad alinea las líneas de un contenedor flexible dentro del contenedor flexible cuando hay espacio adicional en el eje transversal, similar a cómojustify-contentalinea elementos individuales dentro del eje principal.
Tenga en cuenta que esta propiedad no tiene efecto en un contenedor flexible de una sola línea.
En términos de esta pregunta, olvídate de align-content. Es inútil (a menos que sus artículos flexibles se envuelvan).
Simplemente use align-items: flex-end (o align-self: flex-end sobre el span‘s):
body {
background-color: grey;
}
.column {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: stretch;
background-color: green;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: flex-end; /* will work when items have wrapped */
align-items: flex-end; /* adjusted; works when items in one line */
background-color: red;
}
.row-test {
min-height: 200px;
}
span {
width: 30%;
background-color: orange;
/* align-self: flex-end; this would also work on single line container */
}<body class="column">
<section class="row row-test">
<span>Test Test Test Test Test Test Test Test Test</span>
<span>Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test</span>
</section>
</body>-
align-content no es align-items. Aparentemente. Gracias.
– SoEzPz
18 de enero de 2019 a las 5:24
-
No funciona a partir de 2023 en Chrome. Se muestra de forma similar al ejemplo dado por el iniciador de tema.
– Andrei Putilov
27 de marzo a las 20:36
Tal vez quieras usar justify-content en lugar de align-content
-
Creo que esta debería ser la mejor respuesta (en 2020). El uso de justificar el contenido resuelve el problema en casi todos los navegadores. Nota: recuerde que solo funcionará si hay más de un elemento en el contenedor flexible
– titoih
3 de abril de 2020 a las 9:26
Debe agregar flex-wrap: wrap; para trabajar alinear contenido
A veces, debe establecer una altura en el contenedor principal para sus elementos flexibles para que el contenido de alineación funcione.
Probablemente tarde para responder a esto, pero elaborando sobre Billy Mitchell, puede configurar el contenedor principal con una altura específica o si desea centrarlo por completo,
.parent {
display: flex;
flex-flow: row wrap;
height: -webkit-fill-available;
align-content: center;
justify-content: space-evenly;
}<div class="parent">
<div>Child 1</div>
<div>Child 2</div>
</div>Puede estructurar y reemplazar los valores de las propiedades del fragmento anterior según sus necesidades. Aquí hay un guía completa de flexbox que me ayudó mucho.
bajo
Para agregar cosas para probar, conmigo funcionó cuando quité flex-direction: column;. Las cosas todavía están apiladas en una columna y align-content se aplica ahora.