css - start - flexbox guia

¿Qué reglas de CSS se ignoran cuando FlexBox está activo?

Question

¿Cómo puedo configurar Flexbox para tener una buena alternativa? Digamos que tengo esto:

.parent{
 display: flex;
 flex-flow: row wrap;
 width: 320px;
 border: 1px solid black;
}
.children{
 text-align: center;
 flex: 1;
 background: #DDD;
}

<div class="parent">
 <div class="children">1</div>
 <div class="children">2</div>
 <div class="children">3</div>
</div>

¿Qué reglas puedo agregar para tener una buena alternativa para navegadores antiguos y que se ignoren por completo y no molesten a flexbox.

Tenga en cuenta que no pido un polifill ni nada, solo quiero algo que se parezca a algo similar. Sería bueno saber exactamente qué reglas se ignoran cuando flexbox está activo. Obviamente, la visualización se sobrescribe pero, ¿qué pasa con el ancho de los niños? ¿Qué hay de la carroza de los niños? ¿qué pasa con la posición: absoluta? ¿Qué hay de los márgenes?

Answer 1

De acuerdo con la especificación ,

Los contenedores Flex no son contenedores de bloques, por lo que algunas propiedades que se diseñaron con la suposición de la disposición de bloques no se aplican en el contexto del diseño flexible. En particular:

• las propiedades de column-* en el módulo Diseño de múltiples columnas [CSS3COL] no tienen ningún efecto en un contenedor flexible.

• float y clear no tienen ningún efecto en un elemento flexible , y no lo saque fuera de flujo. Sin embargo, la propiedad float aún puede afectar la generación de cajas al influir en el valor calculado de la propiedad de display .

• vertical-align no tiene efecto en un elemento flexible.

• los pseudoelementos ::first-line y ::first-letter no se aplican a los contenedores flexibles , y los contenedores flexibles no aportan una primera línea formateada o una primera letra a sus antepasados.

Para sus preguntas específicas,

• Ancho de elemento flexible (suponiendo flujo horizontal):

  La propiedad de tamaño principal del elemento Flex es la propiedad width o height , cualquiera que esté en la dimensión principal.

  Esto se usará como la base flex-basis si flex-basis es auto :

  Cuando se especifica en un elemento flexible , la palabra clave auto recupera el valor de la propiedad del tamaño principal como el usado flex-basis .

  De lo contrario, será ignorado.

• Posicionamiento absoluto de los niños flexibles

  Un elemento secundario de un contenedor flexible colocado en posición absoluta no participa en el diseño flexible. Sin embargo, sí participa en el paso de reordenamiento (ver order ), que tiene un efecto en su orden de pintado.

• Flexar márgenes y rellenos de elementos

  Los márgenes de los elementos flexibles adyacentes no se colapsan. Los márgenes automáticos absorben espacio extra en la dimensión correspondiente y se pueden usar para la alineación y para separar los elementos flexibles adyacentes; ver Alineación con márgenes auto .

  Los márgenes de porcentaje y los rellenos en ítems flexibles siempre se resuelven contra sus dimensiones respectivas; a diferencia de los bloques, no siempre se resuelven contra la dimensión en línea de su bloque contenedor.

  Nota: Este comportamiento actualmente se disputa , y podría cambiar en una versión futura de esta especificación para que coincida con el comportamiento de los bloques.