css - examples - flexbox html

Modelo de caja flexible-pantalla: flex, box, flexbox? (2)

Hasta donde yo sé, las tres versiones anteriores del modelo de caja flexible se pueden clasificar por sus edades.

display: box - Este fue el primer modelo de caja flexible que fue aceptado como el modelo más nuevo alrededor del año 2009. No lo use.
display: flexbox - Este modelo de caja flexible se presentó en el año 2011, que todavía estaba en desarrollo. No lo uses
display: flex : este es el modelo de caja flexible más nuevo que actualmente encuentra su lugar como el último estándar de caja. Esto podría sufrir más cambios, pero esto es preferible a los otros dos estándares.

Muchos de nosotros somos conscientes de que los valores más antiguos de la propiedad de display , como en inline y en block están desactualizados después de que se haya introducido el nuevo modelo de caja flexible en CSS3. Pero, podríamos encontrar información diferente en la web en el mismo modelo de caja flexible.

Podemos encontrar principalmente 3 valores diferentes de la propiedad de display , a saber, flex , box y flexbox . ¿Cuál es la diferencia entre estos tres modelos de cajas flexibles y cuál usar?

Utiliza los que necesites para los navegadores que necesitas admitir.

`display: box`

Firefox 2.0? (prefijado)
Chrome 4.0? (prefijado)
Safari / iOS 3.1? (prefijado)
Android 2.1 (prefijado)

Por lo que puedo decir, envolviendo a través box-lines: multiple no está implementado en ningún navegador.

`display: flexbox`

Chrome 17-? (prefijado)
Internet Explorer 10 (prefijado)

pantalla: flex : el estándar actual

Chrome 21 (prefijado), 29 (sin prefijo)
Opera 12.1 (sin prefijo), 15 (prefijo de webkit)
Firefox 22 (sin prefijo)
Safari / iOS 7 (prefijado)
Blackberry 10 (prefijado)
Internet Explorer 11 (sin prefijo)

http://caniuse.com/#feat=flexbox (Tenga en cuenta que IE10 es el único navegador marcado con soporte parcial que admite el ajuste)

Las especificaciones para flexbox y flex son lo suficientemente similares como para que no haya razones para no incluir ambas, especialmente porque IE10 solo es compatible con las especificaciones de flexbox . El box especificaciones para es muy diferente y puede que no valga la pena incluirlo dependiendo del efecto que flexbox , aunque casi todas las propiedades tienen un análogo a las que se encuentran en las especificaciones flexbox / flex .

Puede encontrar que hay algunos navegadores compatibles con múltiples especificaciones. Es probable que llegue un momento en que retiren soporte para las especificaciones anteriores, por lo que siempre asegúrese de incluir las propiedades de flex .