css display - Flexbox CSS3: pantalla: caja vs. flexbox vs. flex




2 Answers

Estos son diferentes estilos.
display: box; es una versión de 2009.
display: flexbox; es una versión de 2011.
display: flex; es la versión real.

Cita de Paul Irish

Advertencia: Flexbox ha sufrido algunas revisiones importantes, por lo que este artículo está desactualizado. En resumen, el antiguo estándar (Flexbox 2009) , en el que se basa este artículo, se implementó en Chrome desde v4, Firefox desde v2 e IE10 beta.

Desde entonces, el nuevo estándar flexbox debutó y comenzó a debutar en Chrome 17. Stephan Hay ha escrito una guía sobre la nueva implementación de flexbox . Desde entonces, la especificación sufrió cambios de nombre que comenzaron a aterrizar en Chrome 21. Chrome 22 tiene una implementación estable de la última especificación.

En este punto, implementar cualquiera de ellos tiene sus riesgos , así que ten cuidado.

Here está el blog sobre las diferentes declaraciones flexbox.
This es una entrada de blog de css-tricks sobre las diferentes versiones.

Cuando uso flexbox, siempre lo escribo así:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Editar:
Todavía no todos tienen un navegador / dispositivo capaz de ver los diseños de flexbox. Entonces, para soluciones alternativas o alternativas hay un artículo de Kenan Yusuf sobre cómo usar flexbox sin usar flexbox .

guia bootstrap

Me convertí ayer en un sitio web en la escuela que usa la declaración css3 flexbox. Nunca usé eso antes. Así que googleé un poco. Y encontré muchos estilos diferentes de las declaraciones flexbox.
Algunos tipos escriben display: box; , algunos usan display: flexbox; y otra display: flex; .

Entonces, ¿cuáles son los diferentes? ¿Qué debería usar?




Los cuadros flexibles, o flexbox, es un nuevo modo de diseño en CSS3

El uso de flexbox asegura que los elementos se comporten de manera predecible cuando el diseño de la página debe acomodar diferentes tamaños de pantalla y diferentes dispositivos de visualización

Para muchas aplicaciones, el modelo de caja flexible proporciona una mejora sobre el modelo de bloques en el sentido de que no usa flotadores, ni los márgenes del contenedor flexible colapsan con los márgenes de sus contenidos.

<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>

</body>
</html>

Salida:




Related